Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Cannot redefine toString #10

Open
siriwatknp opened this issue Apr 10, 2024 · 5 comments
Open

[core] Cannot redefine toString #10

siriwatknp opened this issue Apr 10, 2024 · 5 comments
Labels
bug 🐛 Something doesn't work

Comments

@siriwatknp
Copy link
Member

siriwatknp commented Apr 10, 2024

Steps to reproduce

Link to repo: https://github.com/siriwatknp/nextjs-mui-v6

Steps:

  1. pnpm install && pnpm run dev
  2. Go to localhost:3000, the page can be rendered
  3. Add this change, then save and you should see error in the terminal
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 656df43..accc080 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -141,7 +141,7 @@ export default function Checkout() {
           <Box
             sx={{
               display: 'flex',
-              alignItems: 'end',
+              alignItems: 'flex-end',
               height: 150,
             }}
           >

Current behavior

image

Expected behavior

There should be no error.

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pigment-css redefine toString

@siriwatknp siriwatknp added the bug 🐛 Something doesn't work label Apr 10, 2024
@M-AminAlizadeh
Copy link

M-AminAlizadeh commented Apr 11, 2024

Hello there I can work on this
let me know if it's okay

@oliviertassinari oliviertassinari transferred this issue from mui/material-ui Apr 14, 2024
@danilo-leal danilo-leal changed the title [pigment-css] Cannot redefine toString [core] Cannot redefine toString Apr 16, 2024
@siriwatknp
Copy link
Member Author

Hello there I can work on this let me know if it's okay

Feel free to work on it.

@siriwatknp
Copy link
Member Author

siriwatknp commented May 2, 2024

It seems to happen randomly too. I encountered this error in several PRs (retrigger the PR works sometimes)

Here is the error I got randomly in my local machine (note that I added console.log('what', what, 'importer', importer) in asyncResolver of pigment-css-nextjs-plugin:


   ✖  @app/next-app:build
      > @app/next-app@0.1.0 build /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app
      > next build
      
         ▲ Next.js 14.1.4
      
         Creating an optimized production build ...
      what @/assets/mui.svg importer /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/layout.tsx
      what ../../components/Box importer /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/box/page.tsx
      what @babel/runtime/helpers/esm/defineProperty importer /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/page.tsx
      what @mui/material/Chip importer /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/page.tsx
      what ./toPropertyKey.js importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@babel+runtime@7.24.4/node_modules/@babel/runtime/helpers/esm/defineProperty.js
      what ./typeof.js importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@babel+runtime@7.24.4/node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
      what ./toPrimitive.js importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@babel+runtime@7.24.4/node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
      what ./typeof.js importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@babel+runtime@7.24.4/node_modules/@babel/runtime/helpers/esm/toPrimitive.js
      what @babel/runtime/helpers/interopRequireDefault importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what @babel/runtime/helpers/extends importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what @babel/runtime/helpers/objectWithoutPropertiesLoose importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what @mui/utils/formatMuiErrorMessage importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what @mui/utils/deepmerge importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what @mui/system/colorManipulator importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/common importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/grey importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/purple importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/red importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/orange importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/blue importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/lightBlue importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../colors/green importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/styles/createPalette.js
      what ../v13-appRouter importer /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material-nextjs@6.0.0-alpha.0_@emotion+cache@11.11.0_@mui+material@6.0.0-alpha.2_@types+_mtd6yesk7nq6mpl7geluvemxpy/node_modules/@mui/material-nextjs/v14-appRouter/index.js
      unhandledRejection /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:224
            throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
            ^
      
      EvalError: Cannot redefine property: toString in/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/Box/Box.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/Box/index.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/index.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/zero-styled/index.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/ButtonBase/ButtonBase.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/ButtonBase/index.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Chip/Chip.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Chip/index.js
      | /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/page.tsx
      
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/Box/index.js:23:35
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/Box/index.js:38:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/index.js:488:35
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+system@6.0.0-alpha.1_@emotion+react@11.11.4_@emotion+styled@11.11.5_@types+react@18.2.75_react@18.2.0/node_modules/@mui/system/node/index.js:591:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/zero-styled/index.js:21:15
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/zero-styled/index.js:27:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/ButtonBase/ButtonBase.js:17:19
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/ButtonBase/ButtonBase.js:485:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/ButtonBase/index.js:30:42
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/ButtonBase/index.js:57:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Chip/Chip.js:20:42
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Chip/Chip.js:584:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Chip/index.js:23:36
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@mui+material@6.0.0-alpha.2_@types+react@18.2.75_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/node/Chip/index.js:38:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at require.Object.assign.ensure (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
          at /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/page.tsx:9:36
          at /Users/siriwatknp/Personal-Repos/pigment-css/apps/pigment-css-next-app/src/app/page.tsx:146:3
          at Script.runInContext (node:vm:133:12)
          at Module.evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
          at evaluate (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
          at BaseAction.evalFile (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
          at evalFile.next (<anonymous>)
          at /Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
          at EventEmitter.action (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
          at BaseAction.emitAction (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
          at nextFn (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
          at processNext (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
          at Object.next (/Users/siriwatknp/Personal-Repos/pigment-css/node_modules/.pnpm/@wyw-in-js+transform@0.5.3_typescript@5.4.4/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
       ELIFECYCLE  Command failed with exit code 1.
      
      


————————————————————————————————————————————————————————————————————————————————

 Lerna (powered by Nx)   Ran target build for 6 projects and 4 tasks they depend on (36s)

   ✔  9/10 succeeded [0 read from cache]

   ✖  1/10 targets failed, including the following:

      - @app/next-app:build

 ELIFECYCLE  Command failed with exit code 1.

@siriwatknp
Copy link
Member Author

siriwatknp commented May 2, 2024

I found a workaround for Material UI:

// next.config.js

module.exports = withPigment(nextConfig, {
  theme,
  transformLibraries: ['@mui/material'],
  transformSx: true,
  overrideContext: (context) => {
    if (!context.$RefreshSig$) {
      context.$RefreshSig$ = outerNoop;
    }
    return {
      ...context,
      require: (id) => {
        if (id === '@mui/styled-engine') {
          // it's fine to return a dummy module for evaluation phase
          return {
            __esModule: true,
            default: () => () => () => null,
            internal_processStyles: () => {},
            keyframes: () => '',
            css: () => '',
          };
        }
        return context.require(id);
      },
    };
  },
});

@M-AminAlizadeh
Copy link

The browser: Firefox v125.0.2
The OS: Ubuntu 22.04

I tried to reproduce the error but it works on my side without any error

image

image

image

Could you provide more details? if I can't produce the error I can't understand it to work on it.
Best

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants