Storybook: Merging of react-scripts webpack.config.js results in 2 babel-loaders for .js files.

[joeycozza]

I made a brand new create-react-app and then ran npx -p @storybook/cli@next sb init.
If I log out all of the webpack rules that storybook is using, there are 2 rules for babel-loader that hit many of the same files.

.storybook/webpack.config.js

module.exports = async ({ config }) => {
  config.module.rules.forEach(rule => {
    console.log('rule.test: ', rule.test)
    console.log('rule.include: ', rule.include)
    console.log('rule.exclude: ', rule.exclude)
    console.log('JSON.stringify(rule, null, 2): ', JSON.stringify(rule, null, 2))
    console.log('\n')
  })
  return config
}

the babel-loader that comes from storybook

rule.test:  /\.(mjs|jsx?)$/
rule.include:  [ '/Users/joeycozza/Documents/node/cra-storybook-webpack-check' ]
rule.exclude:  [ '/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules' ]
JSON.stringify(rule, null, 2):  {
  "test": {},
  "use": [
    {
      "loader": "babel-loader",
      "options": {
        "cacheDirectory": "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/.cache/storybook",
        "presets": [
          "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-preset-react-app/index.js"
        ],
        "plugins": [
          [
            "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-plugin-named-asset-import/index.js",
            {
              "loaderMap": {
                "svg": {
                  "ReactComponent": "@svgr/webpack?-prettier,-svgo![path]"
                }
              }
            }
          ],
          [
            "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-plugin-react-docgen/lib/index.js",
            {
              "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES"
            }
          ]
        ]
      }
    }
  ],
  "include": [
    "/Users/joeycozza/Documents/node/cra-storybook-webpack-check"
  ],
  "exclude": [
    "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules"
  ]
}

the babel-loader that comes from create-react-app

rule.test:  /\.(js|mjs|jsx|ts|tsx)$/
rule.include:  [ '/Users/joeycozza/Documents/node/cra-storybook-webpack-check/src',
  '/Users/joeycozza/Documents/node/cra-storybook-webpack-check/.storybook' ]
rule.exclude:  undefined
JSON.stringify(rule, null, 2):  {
  "test": {},
  "include": [
    "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/src",
    "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/.storybook"
  ],
  "loader": "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-loader/lib/index.js",
  "options": {
    "customize": "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-preset-react-app/webpack-overrides.js",
    "babelrc": false,
    "configFile": false,
    "presets": [
      "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-preset-react-app/index.js"
    ],
    "cacheIdentifier": "development:[email protected]:[email protected]:[email protected]:[email protected]",
    "plugins": [
      [
        "/Users/joeycozza/Documents/node/cra-storybook-webpack-check/node_modules/babel-plugin-named-asset-import/index.js",
        {
          "loaderMap": {
            "svg": {
              "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
            }
          }
        }
      ]
    ],
    "cacheDirectory": true,
    "cacheCompression": false,
    "compact": false
  }
}

So they are both using babel-loader and babel-preset-react-app, with very similar options in the plugins.

Storybook's obviously adds the DOCGEN with babel-plugin-react-docgen, and the files included are a little bit different, but there is a ton of duplicated work inside the ${appRoot}/src directory

The best case scenario is that starting up storybook is slower because webpack is doing babel-loader twice for many files, and worst case scenario that I was running into, was this error Cannot assign to read only property 'exports' of object '#<Object>'

At my company we are using storybook in a monorepo, and the storybook babel-loader was too inclusive and causing errors. By manually removing storybook's babel-loader I was able to get passed the Cannot assign to read only property ... issue.

Potential Solution:
I noticed that a create-react-app preset was made, and there is work being done on smarter merging of the webpack configs here https://github.com/storybookjs/presets/pull/29. Is there any progress happening with that PR? It looks like if I used the preset, that the double babel-loader issue would probably go away (from what I can tell).

[mrmckeb]

Hi @joeycozza, I'll take a look at this. Consider the preset the future, we'll remove this preset/config from @storybook/react in a future release.

[joeycozza]

If there is anything I can do do help, please let me know. Reproduction repo, updating docs, etc. I'd love to help if you need/want it.

[mrmckeb]

This should be resolved in the new preset from my testing... we'll try to get a release out in the next day or two.

https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app

You can see the tracking issue above (https://github.com/storybookjs/presets/issues/36).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@joeycozza can you verify the latest preset-create-react-app fixes this for you?

[joeycozza]

Okay, I'll test it out and get back to you.

[joeycozza]

I tested with 5.3.0-alpha.23, and the duplicate babel-loader is NOT there. Hooray!

After running create-react-app, I ran npx -p @storybook/cli@next sb init and it included @storybook/preset-create-react-app by itself, and used the preset in .storybook/presets.js by itself. Awesome work with the cli!

Thanks so much for your hard work shilman and mrmckeb!

[shilman]

Great job @mrmckeb 🙌 .. the new preset is fab 💯