Cant start React-Styleguidist server (Error require ESM) require()

[marcabbink]

Hello there, We are trying to use your tool, and thus are going through your documentation. We installed the tool, have a default webpack.config.js but when we say

npx styleguidist server We get:

Marcs-MBP:xxxxxxxx xxxxxx$ npx styleguidist server
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/xxxxxx/Work/xxxxxx/styleguide.config.js from /Users/xxxxxx/Work/xxxxxx/node_modules/react-styleguidist/lib/scripts/config.js not supported.
styleguide.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename styleguide.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/xxxxxx/Work/xxxxxx/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

I can start changing your package code and make a PR but I don't think that is the best idea. There must be a simple solution for this right?

[Manish-Rawat-1186]

i start writing in es6 syntex so no more use require and you can use es6 syntex just change in json file and you can file these import word

[technobuddha]

Any resolution of this issue? I have the same problem.

My webpack config is in an ES6 module.

• If I create styleguide.js it will give the above warning since I have 'type: module" set in my package.json
• If I rename it to styleguide.cjs (and include the --config option)
  1. I can't require my webpack config (can't import ES6 module via require)
  2. I can't import my webpack config (can't use import in outside a module)
  3. I can't import() my webpack config, because I can't use a top-level await outside a module.
• I can't rename to styleguide.mjs (same error as above)

[gigaSproule]

@technobuddha Have you tried passing in the configuration using --config? I just ran into the same issue and used styleguidist build --config styleguide.config.cjs, which is working for me. I know it's not the same as the issue you were getting, but I was having a hell of a time trying to get it to pick up my config properly until I realised there was a config flag.