[webpack config] Support .mjs files

[magicmark]

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:

• Can't reexport the named export from non EcmaScript module (only default export is available) apollographql/apollo-link-state#302
• Compile error with webpack 4 graphql/graphql-js#1272

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:

react-styleguidist/src/scripts/make-webpack-config.js

Line 45 in 4ef3cc9

extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],

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

As suggested: graphql/graphql-js#1272 (comment)

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

[sapegin]

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

Makes sense! Feel free to send a pull request 👾

[sapegin]

Oh, you did already, nice ;-)

[styleguidist-bot]

🎉 This issue has been resolved in version 9.1.9 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀