wyw-js/transform issues causing the server to stop after adding "@pigment-css/react": "^0.0.28",

[aditya0096]

Related page

https://mui.com/material-ui/migration/migrating-to-pigment-css/

Kind of issue

Unclear explanations

Issue description

After adding the package @pigment-css/react we get this warning

warning @pigment-css/react > @wyw-in-js/transform > babel-merge@3.0.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
Had tried to suppress the errors but did not find any solution fir this.

Error:
⨯ unhandledRejection: Error: /Users/adityajadhav/viu-web/src/utils/regionUtils.ts: Dynamic import argument must be a string or a template literal at PluginPass.call (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/plugins/dynamic-import.ts:36:17) at call (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/visitors.ts:303:14) at NodePath.call [as _call] (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/path/context.ts:36:20) at NodePath.call (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/path/context.ts:21:18) at NodePath.visit (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/path/context.ts:97:31) at TraversalContext.visitQueue (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/context.ts:148:16) at TraversalContext.visitSingle (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/context.ts:109:19) at TraversalContext.visit (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/context.ts:180:19) at traverseNode (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/traverse-node.ts:40:17) at NodePath.visit (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/path/context.ts:104:33) at TraversalContext.visitQueue (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/context.ts:148:16) at TraversalContext.visitSingle (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/context.ts:109:19) at TraversalContext.visit (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/context.ts:180:19) at traverseNode (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/traverse-node.ts:40:17) at NodePath.visit (/Users/adityajadhav/viu-web/node_modules/@babel/traverse/src/path/context.ts:104:33) /Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/lib/module.js:224 throw new EvalError(${e.message} in${this.callstack.join('\n| ')}\n`);
^

EvalError: Cannot assign to read only property '__esModule' of function 'function initHeadManager() {
return {
mountedInstances: new Set(),
updateHead: (head)=>{
......
}' in/Users/adityajadhav/viu-web/node_modules/next/dist/client/head-manager.js
| /Users/adityajadhav/viu-web/node_modules/next/dist/client/script.js
| /Users/adityajadhav/viu-web/node_modules/next/dist/shared/lib/router/router.js
| /Users/adityajadhav/viu-web/node_modules/next/dist/client/router.js
| /Users/adityajadhav/viu-web/node_modules/next/router.js
| /Users/adityajadhav/viu-web/src/components/app/BackToTopButton.tsx

at Module.evaluate (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/module.ts:330:13)
at require.Object.assign.ensure (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/module.ts:181:9)
at newRequire (/Users/adityajadhav/viu-web/node_modules/@pigment-css/unplugin/src/index.ts:91:12)
at /Users/adityajadhav/viu-web/node_modules/next/dist/client/script.js:35:22
at /Users/adityajadhav/viu-web/node_modules/next/dist/client/script.js:346:3
at Script.runInContext (node:vm:134:12)
at Module.evaluate (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/module.ts:311:14)
at require.Object.assign.ensure (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/module.ts:181:9)
at newRequire (/Users/adityajadhav/viu-web/node_modules/@pigment-css/unplugin/src/index.ts:91:12)
at /Users/adityajadhav/viu-web/node_modules/next/dist/shared/lib/router/router.js:32:17
at /Users/adityajadhav/viu-web/node_modules/next/dist/shared/lib/router/router.js:1702:3
at Script.runInContext (node:vm:134:12)
at Module.evaluate (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/module.ts:311:14)
at require.Object.assign.ensure (/Users/adityajadhav/viu-web/node_modules/@wyw-in-js/transform/src/module.ts:181:9)
at newRequire (/Users/adityajadhav/viu-web/node_modules/@pigment-css/unplugin/src/index.ts:91:12)`

here is my package.json below

{
"name": "viu-web",
"version": "4.11.2",
"private": true,
"homepage": "https://bitbucket.org/VIU-OTT/viu-web",
"scripts": {
"dev": "nodemon",
"dev-proxy": "NODE_OPTIONS=--dns-result-order=ipv4first local-ssl-proxy --source 443 --target 3000",
"build:js": "node esbuild.js",
"build": "next build && yarn build:js",
"start": "NODE_ENV=production node server.js",
"lint": "next lint",
"pretest": "tsc --incremental -p tests/tsconfig.json && tsc-alias -p tests/tsconfig.json",
"test": "playwright test",
"test:redirect": "playwright test redirect --workers 4",
"test:healthCheck": "playwright test healthCheck -c playwright-healthCheck.config.ts",
"test:regionSimulateIp": "playwright test regionSimulateIp -c playwright-healthCheck.config.ts",
"test:tvcc": "playwright test redirects/tvcc -c playwright-healthCheck.config.ts --reporter=line,"tests/reporters/csv.ts" --workers 5",
"analyze": "ANALYZE=true yarn build",
"check": "tsc --noEmit -p tsconfig.json",
"check:server": "tsc --noEmit -p tsconfig.server.json",
"prepare": "husky install",
"postinstall": "patch-package",
"tool:i18n": "node tools/i18n",
"tool:assets": "node tools/assets",
"tool:ip": "node tools/ip",
"bump:prod-minor": "standard-version --releaseCommitMessageFormat 'chore(master): bump to {{currentTag}}' --no-verify --release-as minor",
"bump:prod-patch": "standard-version --releaseCommitMessageFormat 'chore(master): bump to {{currentTag}}' --no-verify --release-as patch",
"bump:release": "standard-version --releaseCommitMessageFormat 'chore(release): bump to {{currentTag}}' --no-verify --prerelease alpha --skip.changelog=true --skip.tag=true"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"npx prettier --write",
"npx eslint --fix ./src"
]
},
"browserslist": {
"production": [
">0.5%",
"last 3 Chrome version",
"last 3 Firefox version",
"last 3 Opera version",
"last 3 Edge version",
"Safari >= 11",
"ios_saf >= 11",
"not dead",
"not OperaMini all"
],
"development": [
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 Safari version"
]
},
"engines": {
"node": ">=18.0.0"
},
"resolutions": {
"@types/react": "18.2.48",
"@wyw-in-js/transform": "0.5.5"
},
"dependencies": {
"@babel/core": "^7.26.0",
"@datadog/native-metrics": "^2.0.0",
"@emotion/cache": "^11.14.0",
"@emotion/react": "^11.14.0",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.8.1",
"@emotion/utils": "^1.4.2",
"@floating-ui/react": "^0.26.13",
"@mui/icons-material": "6.0.0",
"@mui/lab": "^6.0.0-beta.20",
"@mui/material": "^6.2.1",
"@mui/material-pigment-css": "^6.2.1",
"@next/bundle-analyzer": "^12.2.3",
"@nx/next": "^20.2.2",
"@pigment-css/react": "^0.0.28",
"@reduxjs/toolkit": "^2.2.1",
"@sentry/nextjs": "^7.109.0",
"axios": "^1.6.7",
"bitmovin-player": "8.188.0",
"bitmovin-player-ui": "^3.37.0",
"body-scroll-lock": "^4.0.0-beta.0",
"can-autoplay": "^3.0.2",
"cookie": "^0.5.0",
"crypto-js": "^4.2.0",
"date-fns": "^2.28.0",
"date-fns-tz": "^1.3.6",
"dd-trace": "^5.22.0",
"dotenv": "^16.0.1",
"dsbridge": "^3.1.4",
"embla-carousel": "^8.0.0-rc22",
"embla-carousel-autoplay": "^8.0.0-rc22",
"embla-carousel-class-names": "^8.0.0-rc22",
"embla-carousel-react": "^8.0.0-rc22",
"express": "^4.18.2",
"firebase": "^9.8.2",
"formik": "^2.2.9",
"ip-range-check": "^0.2.0",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"lodash-es": "^4.17.21",
"material-ui-popup-state": "^5.0.10",
"mobile-detect": "^1.4.5",
"next": "14.1.0",
"next-compose-plugins": "^2.2.1",
"next-redux-wrapper": "^8.1.0",
"next-seo": "6.4.0",
"next-translate": "^1.5.0",
"nprogress": "^0.2.0",
"patch-package": "^6.4.7",
"pino": "^8.11.0",
"pino-http": "^8.3.3",
"prebid.js": "7.54.5",
"qrcode.react": "^3.1.0",
"react": "18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "18.2.0",
"react-google-recaptcha": "^2.1.0",
"react-gtm-module": "^2.0.11",
"react-modal-promise": "1.0.2",
"react-otp-input": "^2.4.0",
"react-redux": "^9.1.0",
"react-toastify": "^9.1.3",
"react-use": "^17.3.2",
"request-ip": "^2.1.3",
"sass": "^1.51.0",
"stylis": "^4.1.1",
"stylis-plugin-rtl": "^2.1.1",
"swr": "^2.2.4",
"use-scroll-direction": "1.1.4",
"use-timer": "^2.0.1",
"yup": "^0.32.11"
},
"devDependencies": {
"@pigment-css/nextjs-plugin": "^0.0.28",
"@playwright/test": "^1.46.1",
"@types/body-scroll-lock": "^3.1.0",
"@types/can-autoplay": "^3.0.1",
"@types/cookie": "^0.5.1",
"@types/crypto-js": "^4.2.2",
"@types/express": "^4.17.17",
"@types/google-one-tap": "^1.2.2",
"@types/js-cookie": "^3.0.1",
"@types/lodash-es": "^4.17.6",
"@types/node": "17.0.23",
"@types/nprogress": "^0.2.0",
"@types/react": "18.2.48",
"@types/react-dom": "18.2.18",
"@types/react-google-recaptcha": "^2.1.9",
"@types/react-gtm-module": "^2.0.1",
"@types/react-swipeable-views": "^0.13.1",
"@types/request-ip": "^0.0.37",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"babel-loader": "^8.2.4",
"esbuild": "^0.17.14",
"esbuild-node-externals": "^1.6.0",
"eslint": "8.12.0",
"eslint-config-next": "14.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^8.0.0",
"lint-staged": "^14.0.1",
"nodemon": "^2.0.20",
"prettier": "^2.6.2",
"standard-version": "^9.5.0",
"ts-node": "^10.9.1",
"tsc-alias": "^1.8.10",
"tsconfig-paths": "^4.1.2",
"type-fest": "^2.19.0",
"typescript": "5.3.3",
"urlpattern-polyfill": "^6.0.1"
}
}

Context

Trying to migrate to pigmentCSS cannot run the server so could not proceed with testing out metrics in compare to emotion

Search keywords: @pigment-css/react

[brijeshb42]

From the error, it seems to be related to non static dynamic imports. Could you share the code where you are using dynamic import import()

[FourwingsY]

Same here too.
In my case, pigmentcss + next-intl (actually, @tolgee/react) had collision.

async function getStaticData(locales: string[]) {
  ...
  const messages[locale] = (await import(`../messages/${locale}.json`)).default
  ...
}

The error message disappeard when i removed withPigment() on next.config.ts

[brijeshb42]

@Fourwingsiu can you confirm if it's not an issue with An older version?