Webpack error "loose module configuration must be the same"

[danyelf]

Describe the bug
I upgraded storybook from v5.3.19 to 6.0.12, and I'm seeing this error at startup time.

To Reproduce
Steps to reproduce the behavior:

Ran yarn upgrade --latest -S @storybook/

Somewhere buried in our standard babel.config.js we specify

    ["@babel/plugin-proposal-class-properties", { loose: false }],

Besides being somewhere in our package.json, we don't otherwise use the loose flag

Screenshots
The precise error message is:

ERROR in ./.storybook/generated-refs.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /home/danyel/go/src/github.com/honeycombio/hound/cmd/poodle/.storybook/generated-refs.js: 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).
    at enableFeature (/home/danyel/go/src/github.com/honeycombio/hound/cmd/poodle/node_modules/@storybook/core/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:50:13)
    at PluginPass.pre (/home/danyel/go/src/github.com/honeycombio/hound/cmd/poodle/node_modules/@storybook/core/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:51:35)
    at transformFile 
...

Code snippets
I've created a .stroybook/.babelrc which contains

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "loose": false,
                "shippedProposals": true
            }
        ]
    ]
}

In addition, I've ensured that my yarn.lock file has no uses of babel < v10.5, which is when babel/babel#11622 was reported as fixed. I saw several people complain about this for pre-release storybook 6, but not for post-release. (Congratulations, btw, on the release!)

System:

Environment Info:

  System:
    OS: Linux 5.4 Pop!_OS 20.04 LTS
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
  Binaries:
    Node: 12.16.2 - ~/.volta/tools/image/node/12.16.2/bin/node
    Yarn: 1.22.4 - ~/.volta/tools/image/yarn/1.22.4/bin/yarn
    npm: 6.14.4 - ~/.volta/tools/image/node/12.16.2/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
  npmPackages:
    @storybook/addon-actions: ^6.0.12 => 6.0.12
    @storybook/addon-docs: ^6.0.12 => 6.0.12
    @storybook/addon-storyshots: ^6.0.12 => 6.0.12
    @storybook/addon-storysource: ^6.0.12 => 6.0.12
    @storybook/react: ^6.0.12 => 6.0.12
    @storybook/source-loader: ^6.0.12 => 6.0.12
    @storybook/theming: ^6.0.12 => 6.0.12

[danyelf]

Was able to work around this using babel/babel#11622 (comment) : explicitly adding both addins

[stale]

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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[hydrosquall]

#12093 (comment)

I was able to work around this error message by upgrading the versions of all my @babel/* deps to the latest version, per the last comment in the thread.

[nigelellis]

I was able to solve this via. Yarn resolutions:

"resolutions": {
  "@babel/core": "7.13.15",
  "@babel/preset-env": "7.13.15"
}

[eduludi]

The way I solved this, using Storybook v6.29, was adding the following into .storybook/main,js

module.exports = {
  babel: async options => ({
    ...options,

    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
    ],
  }),
  
  // ... other settings here
}

[ArcticTee]

I tried the things mentioned above, but they did not work for me.

Upgrading all @babel/ dependencies and @storybook/ worked for me 🏁

Now I still get a warning, but I can start storybook... 🥳

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.

Coming from @babel/[email protected] and @storybook/[email protected]

upgraded to @babel/[email protected] and @storybook/[email protected]

{
...
"@babel/cli": "7.14.5",
"@babel/core": "7.14.6",
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/plugin-proposal-export-default-from": "7.14.5",
"@babel/plugin-proposal-optional-chaining": "7.14.5",
"@babel/plugin-transform-runtime": "7.14.5",
"@babel/plugin-transform-typescript": "7.14.6",
"@babel/preset-env": "7.14.7",
"@babel/preset-react": "7.14.5",
"@babel/preset-typescript": "7.14.5",
"@babel/runtime": "7.14.6",
"@storybook/addon-actions": "6.2.9",
"@storybook/addon-info": "5.3.21",
"@storybook/addon-links": "6.2.9",
"@storybook/addons": "6.2.9",
"@storybook/cli": "6.2.9",
"@storybook/react": "6.2.9",
...

Hope this helps someone... 😄

[jackhair]

The way I solved this, using Storybook v6.29, was adding the following into .storybook/main,js

module.exports = {
  babel: async options => ({
    ...options,

    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
    ],
  }),
  
  // ... other settings here
}

Using Storybook 6.3.8 and this fixed my issue. Thank you.

I also had to make sure I had the plugins listed in my .babelrc file too.

{
  "plugins": [
    ...,
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods"
  ],
  ...
}

[loxator]

Along with adding resolutions in package.json, what worked for me was to provide a custom .babelrc in the .storybook/ folder. Removed the plugins bit that was in main .babelrc file.

package.json

"resolutions": {
     "@babel/core": "7.17.12",
    "@babel/types": "7.17.12"
  },

.babelrc

{
  "presets": [
    [
      // Latest stable ECMAScript features
      "@babel/preset-env",
      {
        "useBuiltIns": false,
        // Do not transform modules to CJS
        "modules": false,
        "targets": {
          "chrome": "49",
          "firefox": "52",
          "opera": "36",
          "edge": "79"
        }
      }
    ],
    "@babel/typescript",
    [
      "@babel/react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}