React-styleguidist: [webpack config] Support .mjs files

Created on 19 Jun 2019 · 3Comments · Source: styleguidist/react-styleguidist

The problem

graphql uses .mjs files, which when using in a component build with styleguidist produces the following errors:

Can't reexport the named export 'BREAK' from non EcmaScript module (only default export is available)
Can't reexport the named export 'BreakingChangeType' from non EcmaScript module (only default export is available)
Can't reexport the named export 'DEFAULT_DEPRECATION_REASON' from non EcmaScript module (only default export is available)
Can't reexport the named export 'DangerousChangeType' from non EcmaScript module (only default export is available)
Can't reexport the named export 'DirectiveLocation' from non EcmaScript module (only default export is available)
...

See the following for similar issues:

Why?

Take a look at the package.json for graphql - https://unpkg.com/[email protected]/package.json

It uses this: "module": "index.mjs",

It looks we don't support .mjs in the base webpack config:

https://github.com/styleguidist/react-styleguidist/blob/4ef3cc97df89d5981c82f4836eef973ffab2f800/src/scripts/make-webpack-config.js#L45

Is this a deliberate move not to support mjs files?

Proposed solution

Add .mjs back into the resolutions field, per the defaults:

https://webpack.js.org/configuration/resolve/#resolveextensions

Alternative solutions

Additional context

From https://github.com/webpack/webpack/releases/tag/v4.0.0:

webpack now supports these module types:
- javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
- javascript/esm: EcmaScript modules, all other module system are not available
- javascript/dynamic: Only CommonJS and, EcmaScript modules are not available
- json: JSON data, it's available via require and import
- webassembly/experimental: WebAssembly modules (currently experimental)

javascript/esm handles ESM more strictly compared to javascript/auto:
- Imported names need to exist on imported module
- Dynamic modules (non-esm, i. e. CommonJs) can only imported via default import, everything else (including namespace import) emit errors

In .mjs modules are javascript/esm by default

good first issue help wanted released

Source