fix(www): update storybook docs to prefer Gatsby ES6 module in webpack config #10669
Conversation
sidharthachatterjee
added
the
type: documentation
| @@ -85,6 +85,9 @@ module.exports = (baseConfig, env, defaultConfig) => { | |||
| require.resolve("@babel/plugin-proposal-class-properties"), | |||
| ] | |||
|
|
|||
| // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint | |||
| defaultConfig.resolve.mainFields = ["browser", "module", "main"] | |||
There was a problem hiding this comment.
I'm pretty surprised this isn't the way this already works.
I believe Webpack works this way--and Storybook uses Webpack afaik, so this is odd.
There was a problem hiding this comment.
@DSchau The defaultConfig from storybook has mainFields: ['browser', 'main', 'module'],
I think it gets set at https://github.com/storybooks/storybook/blob/0ef3f40d678fb42ca74505e99cc3ad2449c3bfdf/lib/core/src/server/preview/iframe-webpack.config.js#L84
There was a problem hiding this comment.
I wonder how this will affect other modules outside of gatsby, with that said I think we should make the change to docs still
| @@ -85,6 +85,9 @@ module.exports = (baseConfig, env, defaultConfig) => { | |||
| require.resolve("@babel/plugin-proposal-class-properties"), | |||
| ] | |||
|
|
|||
| // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint | |||
| defaultConfig.resolve.mainFields = ["browser", "module", "main"] | |||
There was a problem hiding this comment.
I wonder how this will affect other modules outside of gatsby, with that said I think we should make the change to docs still
…k config (gatsbyjs#10669) The steps in the current documentation for using Storybook with Gatsby (https://www.gatsbyjs.org/docs/visual-testing-with-storybook/) don't work because importing Link from gatsby in any component breaks. This is because several internals get required as a result of requiring anything from the default commonjs build (which would have been tree shaken before gatsbyjs#9123) and eventually require a non-existent `pages.json`. More details are at gatsbyjs#10668 This pull request updates the documentation with a quick fix (setting resolve.mainFields in the storybook webpack config override thereby _preferring_ es6 gatsby over commonjs) Fixes gatsbyjs#10662
The steps in the current documentation for using Storybook with Gatsby (https://www.gatsbyjs.org/docs/visual-testing-with-storybook/) don't work because importing Link from gatsby in any component breaks.
This is because several internals get required as a result of requiring anything from the default commonjs build (which would have been tree shaken before #9123) and eventually require a non-existent
pages.json.More details are at #10668
This pull request updates the documentation with a quick fix (setting resolve.mainFields in the storybook webpack config override thereby preferring es6 gatsby over commonjs)
Fixes #10662