foreign-sapphire•3w ago

Issue with ERR_REQUIRE_ESM When Launching examples/base-material-ui

Hello, I am encountering an error when trying to start the examples/base-material-ui project. The error message is as follows:

Error [ERR_REQUIRE_ESM]: require() of ES Module /**/refine/node_modules/wrap-ansi/node_modules/string-width/index.js from /**/refine/node_modules/wrap-ansi/index.js not supported.
Instead change the require of /**/refine/node_modules/wrap-ansi/node_modules/string-width/index.js in /**/refine/node_modules/wrap-ansi/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/**/refine/node_modules/wrap-ansi/index.js:2:21) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.18.2

Error [ERR_REQUIRE_ESM]: require() of ES Module /**/refine/node_modules/wrap-ansi/node_modules/string-width/index.js from /**/refine/node_modules/wrap-ansi/index.js not supported.
Instead change the require of /**/refine/node_modules/wrap-ansi/node_modules/string-width/index.js in /**/refine/node_modules/wrap-ansi/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/**/refine/node_modules/wrap-ansi/index.js:2:21) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.18.2

It appears that the module wrap-ansi is attempting to use require() on an ES Module (string-width), which is causing the error. Could anyone please advise on how to resolve this issue? Is there a recommended workaround or a configuration change that would allow the base-material-ui example to run correctly? Thank you very much for your assistance! Best regards, iwasaki

2 Replies

kapa.ai•3w ago

Hi @shun1112. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your question about the ERR_REQUIRE_ESM error you're encountering with the base-material-ui example in refine. This issue is related to a known problem with Material UI and ESM compatibility. Let me provide some information and potential workarounds based on the available knowledge sources. The error you're seeing is similar to issues reported in several refine GitHub issues. It's primarily caused by how Material UI packages handle ESM and CommonJS imports. Here are a couple of relevant points and potential solutions: 1. This is a known issue that affects various refine projects using Material UI components. It's not specific to your setup, but rather a broader compatibility problem between certain dependencies. 2. One potential workaround, as suggested in the GitHub issue about ERR_UNSUPPORTED_DIR_IMPORT, is to inline the @refinedev/mui dependency in your Vite configuration. You can try adding the following to your vite.config.ts file:

   export default defineConfig({
     // ... other config
     test: {
       // ... other test config
       server: {
         deps: {
           inline: ["@refinedev/mui"]
         }
       }
     }
   });

   export default defineConfig({
     // ... other config
     test: {
       // ... other test config
       server: {
         deps: {
           inline: ["@refinedev/mui"]
         }
       }
     }
   });

3. Another potential solution, mentioned in the same issue, is to use npm instead of yarn or pnpm to install dependencies. This has worked for some users as a temporary fix. 4. If you're using Vitest for testing, you might need to add the DISABLE_ESLINT_PLUGIN=true to your .env file, as suggested in another GitHub issue about examples failing to run. 5. It's worth noting that this issue is partially dependent on Material UI resolving some of their ESM export issues. The refine team is aware of the problem and is working on providing more comprehensive fixes as Material UI updates become available. If these solutions don't work for your specific case, you might want to try updating to the latest versions of refine and Material UI packages, as some of these issues have been addressed in newer releases. For the most up-to-date information and support, I recommend checking the refine GitHub issues or reaching out to the refine community on their Discord channel. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@608288486016942094> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Issue with ERR_REQUIRE_ESM When Launching examples/base-material-ui

Did you find this page helpful?