search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.21k stars 9.26k forks source link

loose option warning while building after 6.2.9 upgrade #14805

Closed RyanHavoc closed 3 years ago

RyanHavoc commented 3 years ago

Describe the bug We're upgrading from @storybook/vue 6.1.21 to 6.2.9 an we're now seeing the following error during Storybook start:

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.

This warning was shown multiple times during the build and then eventually I'd get an error and the build would fail.

We have a .bashrc file so I updated it to this:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "ie 11, last 2 versions",
        "useBuiltIns": "usage",
        "corejs": 3,
        "loose": true,
        "shippedProposals": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ],
        "@vue/babel-preset-jsx"
      ],
      "plugins": ["dynamic-import-node"]
    }
  },
  "plugins": [
    "@babel/plugin-syntax-dynamic-import", 
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
  ]
}

This has helped somewhat but we still get the error, however Storybook does start.

image

To Reproduce

All I did to see these issues was npx sb@latest upgrade and after starting storybook again I see the warnings.

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/Code/snyk/registry/frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 82.0.2
    Safari: 14.1
  npmPackages:
    @storybook/addon-a11y: ^6.2.9 => 6.2.9
    @storybook/addon-actions: ^6.2.9 => 6.2.9
    @storybook/addon-backgrounds: ^6.2.9 => 6.2.9
    @storybook/addon-docs: ^6.2.9 => 6.2.9
    @storybook/addon-queryparams: ^6.2.9 => 6.2.9
    @storybook/addon-storysource: ^6.2.9 => 6.2.9
    @storybook/preset-typescript: ^3.0.0 => 3.0.0
    @storybook/source-loader: ^6.2.9 => 6.2.9
    @storybook/vue: ^6.2.9 => 6.2.9
fapspirit commented 3 years ago

Had the same warning on the fresh install of storybook.

I tried to add this plugin in babel field inside .storybook/main.js, but the warnings didn't disappear.

However, warnings went away when I manually added [require.resolve("@babel/plugin-proposal-private-property-in-object"), { "loose": true }] inside my node_modules in this file: https://github.com/storybookjs/storybook/blob/60c864bad312aa777657619041d415f03b223496/lib/core-common/src/utils/babel.ts#L3

I suppose this should be in the default Babel config, or I missing something?

RyanHavoc commented 3 years ago

Interesting... It would be great if we could find an official solution to this without needing to fork and fix in this way.

robcaldecott commented 3 years ago

I tried manually installing the @babel/plugin-proposal-private-property-in-object plugin and updated my babel config but it makes no difference. But Storybook will start albeit with lots of these warnings as it builds.

RyanHavoc commented 3 years ago

That's what I see too. Would be good to get rid of the warnings. 😕

gregorybolkenstijn commented 3 years ago

Updating to the latest @babel/core at 7.14.0, deleting the node_modules folder, deleting and rebuilding yarn.lock also does not remove the warning.

trouba commented 3 years ago

Adding plugins: ['@babel/plugin-proposal-private-property-in-object', { loose: true }], in main.js removed the warning for me:

addons: [{
    name: '@storybook/addon-docs',
    options: {
        babelOptions: {
            plugins: [
                ['@babel/plugin-proposal-private-property-in-object', {
                    loose: true
                }],
            ],
        },
    },
}, ],

Read also: https://github.com/babel/babel/issues/11622

RyanHavoc commented 3 years ago

Unfortunately making that same change for me didn't make any difference.

trouba commented 3 years ago

@RyanHavoc Sorry, did you try adding in in .storybook/main.js and not in your .bashrc ?

RyanHavoc commented 3 years ago

Yes, I tried adding those to my babel config in main.js and also like this:

plugins: [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
]

But no joy.

RyanHavoc commented 3 years ago

Possibly there's something different with Vue instance. This same setup don't remove the warning for me.

samydoesit commented 3 years ago

Same here, none of the solutions above do work in our setup.

After Upgrading to latest pre release we do also get a lot of these warnings "Field 'browser' doesn't contain a valid alias configuration".

Storybook doesn't start. Does someone know whats going on?

dontsave commented 3 years ago

We are seeing this issue in 6.2.9 when building the manager with Webpack 5. None of the above workarounds eliminate the warns for us.

danantal commented 3 years ago

We are also seeing this issue and none of the workarounds works for us either. (6.2.9) Any resolution / workaround here? It is quite a bit annoying due to the amount of output that it spams in the console when building a large project.

RyanHavoc commented 3 years ago

I've found that adding:

  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
  ]

To our .bablerc file reduces the amount of warning spam to a couple of repetitions, but doesn't make it go away entirely.

jaykay-p commented 3 years ago

I tried all above workarounds, but none worked.

What worked for me was downgrading @babel/preset-env to ~7.13.0. The loose warning happened not when I upgraded storybook to 6.2.9, but when @babel/preset-env was upgraded to ^7.14.0

erykpiast commented 3 years ago

Same here. Tried everything above with no success. Downgrade to @babel/preset-env@7.13.0 didn't help either. I'm out of ideas at the moment, to be honest, sticking to Storybook 6.1 for now :(

danantal commented 3 years ago

@kuk941025 Thanks, indeed, it does fix the issue for us as well.

@erykpiast Initially, we also tried downgrading the @babel/preset-env to no avail, but that was actually due to it being installed in multiple versions by different packages. Maybe you are in the same situation. You can try to run yarn why @babel/preset-env or npm ls @babel/preset-env to actually check which versions are installed - and if you are on yarn you can use package json resolutions to force the version.

erykpiast commented 3 years ago

You're right @danantal, I have multiple versions indeed and Storybook is still using 7.14! Thank you for this idea! :D

I'm not using Yarn, but uninstalling Storybook packages via NPM and installing them again did the trick. Poor-man resolution forcing in action 🙃

audishos commented 3 years ago

I resolved this by creating .storybook/.babelrc with the following:

{
    "presets": [
        ["@babel/preset-env", { "loose": true, "targets": { "node": "current" } }],
        ["@babel/preset-react", { "runtime": "automatic" }]
    ],
    "plugins": [
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        ["@babel/plugin-proposal-private-methods", { "loose": true }],
        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
    ]
}

This config is only used by storybook so I don't have to worry about loose mode being used when building my modules outside of storybook. You'll need to make sure that you have all of the above presets and plugins defined in your package.json.

binary64 commented 3 years ago

package.json > resolutions "**/@babel/preset-env": "7.13.15" - didn't solve it package.json > devDependencies > "@babel/preset-env": "7.14.1", to "@babel/preset-env": "7.13.15", - didn't solve it audishos's suggestion in my .storybook\.babelrc (monorepo) - didn't solve it last ditch effort and rm -rf node_modules && yarn - didn't solve it

I'm a bit stumped

erykpiast commented 3 years ago

@binary64 I had success with 7.12.11, maybe you could try it. See my comment above if resolutions doesn't work (so if npm ls still shows that Storybook uses newer one).

ThinCats commented 3 years ago

workaround, add babel config in .storybook/main.js

module.exports = {
  stories: ...,
  addons: ...,
  babel: async (options) => {
    const { plugins = [] } = options
    return {
      ...options,
      plugins: [
        ...plugins,
        [
          require.resolve('@babel/plugin-proposal-private-property-in-object'),
          { loose: true },
        ],
      ]
    }
  },
}
alvis commented 3 years ago

For anyone looking for the doc for the Babel function, here is the link https://storybook.js.org/docs/react/configure/babel

pixelass commented 3 years ago

@ThinCats thx for the snippet, sadly this does not solve the problem for us (neither did any of the other suggestions from this and related issues in different repositories)

thien-do commented 3 years ago

@pixelass it's supposed to solve just some of the warnings :D it may help by make sure you only have 1 version of these dependencies (e.g. babel-loader, preset-env etc.) but even so there are still 3 - 5 warnings (at least in my case) :(

shilman commented 3 years ago

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-beta.2 containing PR #15055 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

pixelass commented 3 years ago

After testing I can confirm that the new beta mentioned in https://github.com/storybookjs/storybook/issues/14805#issuecomment-849600558 removes the warnings.

lifeiscontent commented 3 years ago

@shilman I can't seem to use the latest @next version to fix this issue.

shilman commented 3 years ago

@lifeiscontent meaning upgrading doesn't solve it for you?

lifeiscontent commented 3 years ago

@shilman I'm not sure, I think there might be some code outside of this issue preventing me from using it. When I upgraded I couldn't get storybook to run with the latest package pinned to @next

shilman commented 3 years ago

@lifeiscontent Do you have a repro I can look at?

pybuche commented 3 years ago

@shilman I also still have the problem, even after trying all the solutions above. I'm on 6.3.1 and come from 6.2.5.

stack trace ```ModuleBuildError: Module build failed (from ./node_modules/@storybook/core-common/node_modules/babel-loader/lib/index.js): Error: /Users/pybuche/Work/Alan/alan-web/node_modules/acorn-jsx/index.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 (/Users/pybuche/Work/Alan/alan-web/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:50:13) at PluginPass.pre (/Users/pybuche/Work/Alan/alan-web/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:74:35) at transformFile (/Users/pybuche/Work/Alan/alan-web/node_modules/@storybook/core-common/node_modules/@babel/core/lib/transformation/index.js:96:27) at transformFile.next () at run (/Users/pybuche/Work/Alan/alan-web/node_modules/@storybook/core-common/node_modules/@babel/core/lib/transformation/index.js:35:12) at run.next () at Function.transform (/Users/pybuche/Work/Alan/alan-web/node_modules/@storybook/core-common/node_modules/@babel/core/lib/transform.js:19:41) at transform.next () at step (/Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:261:32) at /Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:273:13 at async.call.result.err.err (/Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:223:11) at /Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:189:28 at /Users/pybuche/Work/Alan/alan-web/node_modules/@storybook/core-common/node_modules/@babel/core/lib/gensync-utils/async.js:62:7 at /Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:113:33 at step (/Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:287:14) at /Users/pybuche/Work/Alan/alan-web/node_modules/gensync/index.js:273:13 at /Users/pybuche/Work/Alan/alan-web/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:316:20 at /Users/pybuche/Work/Alan/alan-web/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /Users/pybuche/Work/Alan/alan-web/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at context.callback (/Users/pybuche/Work/Alan/alan-web/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at /Users/pybuche/Work/Alan/alan-web/node_modules/@storybook/core-common/node_modules/babel-loader/lib/index.js:59:103 ```

.storybook/.babelrc.js

const rootConfig = require("../babel.config");

/**
 * Take the project config, but set loose to true for class properties and private methods for Storybook.
 *
 * As Storybook updates, it's probably worth trying to delete this file and seeing if it will run without
 * the workaround.
 */
const patchedPlugins = rootConfig.plugins.map((plugin) => {
  if (
    [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-private-methods",
    ].includes(plugin)
  ) {
    return [plugin, { loose: true }];
  }
  return plugin;
});

// Add flow to transpile some dependencies

module.exports = {
  ...rootConfig,
  plugins: patchedPlugins.concat(
    "@babel/plugin-transform-flow-strip-types"
  ),
};

.storybook/main.js

module.exports = {
  stories: [
    "../shared/**/*.stories.mdx",
    "../shared/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-essentials",
    "storybook-addon-designs"
  ],
};
thien-do commented 3 years ago

@pybuche hi, can you try yarn why with the mentioned packages? (@babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object)

It's to see if there's any duplication in the dependencies.

pybuche commented 3 years ago

@thien-do Sorry for the late answer. Here are the yarn why for the 3 packages

@babel/plugin-proposal-class-properties ``` yarn why @babel/plugin-proposal-class-properties  1 ✘  2m 0s  alan-backend-EXv2AJIq   14:45:57 yarn why v1.19.0 [1/4] 🤔 Why do we have the module "@babel/plugin-proposal-class-properties"...? [2/4] 🚚 Initialising dependency graph... [3/4] 🔍 Finding dependency... [4/4] 🚡 Calculating file sizes... => Found "@babel/plugin-proposal-class-properties@7.3.4" info Has been hoisted to "@babel/plugin-proposal-class-properties" info Reasons this module exists - "workspace-aggregator-4c874e11-8e56-4aae-91e8-687e36e95c94" depends on it - Specified in "dependencies" - Hoisted from "_project_#@babel#plugin-proposal-class-properties" info Disk size without dependencies: "20KB" info Disk size with unique dependencies: "116KB" info Disk size with transitive dependencies: "6.01MB" info Number of shared dependencies: 30 => Found "metro-react-native-babel-preset#@babel/plugin-proposal-class-properties@7.13.0" info This module exists because "_project_#metro-react-native-babel-preset" depends on it. info Disk size without dependencies: "320KB" info Disk size with unique dependencies: "416KB" info Disk size with transitive dependencies: "6.3MB" info Number of shared dependencies: 30 => Found "@babel/preset-env#@babel/plugin-proposal-class-properties@7.13.0" info This module exists because "_project_#@babel#preset-env" depends on it. info Disk size without dependencies: "20KB" info Disk size with unique dependencies: "116KB" info Disk size with transitive dependencies: "6.01MB" info Number of shared dependencies: 30 => Found "@storybook/builder-webpack4#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#@storybook#builder-webpack4" depends on it - Hoisted from "_project_#@storybook#builder-webpack4#@babel#preset-env#@babel#plugin-proposal-class-properties" info Disk size without dependencies: "408KB" info Disk size with unique dependencies: "504KB" info Disk size with transitive dependencies: "6.39MB" info Number of shared dependencies: 30 => Found "@storybook/core-common#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#@storybook#core-common" depends on it - Hoisted from "_project_#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-class-properties" info Disk size without dependencies: "408KB" info Disk size with unique dependencies: "504KB" info Disk size with transitive dependencies: "6.39MB" info Number of shared dependencies: 30 => Found "next#@babel/plugin-proposal-class-properties@7.10.4" info This module exists because "_project_#murray#next" depends on it. info Disk size without dependencies: "20KB" info Disk size with unique dependencies: "116KB" info Disk size with transitive dependencies: "6.01MB" info Number of shared dependencies: 30 => Found "metro-babel-register#@babel/plugin-proposal-class-properties@7.13.0" info This module exists because "_project_#react-native#metro-babel-register" depends on it. info Disk size without dependencies: "408KB" info Disk size with unique dependencies: "504KB" info Disk size with transitive dependencies: "6.39MB" info Number of shared dependencies: 30 => Found "jscodeshift#@babel/plugin-proposal-class-properties@7.13.0" info This module exists because "_project_#alan-codemods#jscodeshift" depends on it. info Disk size without dependencies: "408KB" info Disk size with unique dependencies: "504KB" info Disk size with transitive dependencies: "6.39MB" info Number of shared dependencies: 30 => Found "@storybook/addon-docs#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#@storybook#addon-docs#@babel#preset-env" depends on it - Hoisted from "_project_#@storybook#addon-docs#@babel#preset-env#@babel#plugin-proposal-class-properties" info Disk size without dependencies: "408KB" info Disk size with unique dependencies: "504KB" info Disk size with transitive dependencies: "6.39MB" info Number of shared dependencies: 30 => Found "babel-preset-fbjs#@babel/plugin-proposal-class-properties@7.13.0" info This module exists because "_project_#react-native#fbjs-scripts#babel-preset-fbjs" depends on it. => Found "next#@babel/preset-env#@babel/plugin-proposal-class-properties@7.13.0" info This module exists because "_project_#murray#next#@babel#preset-env" depends on it. info Disk size without dependencies: "320KB" info Disk size with unique dependencies: "416KB" info Disk size with transitive dependencies: "6.3MB" info Number of shared dependencies: 30 => Found "murray#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#murray#@storybook#react#@storybook#core-common" depends on it - Hoisted from "_project_#murray#@storybook#react#@storybook#core-common#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#murray#@storybook#react#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#murray#@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#@babel#plugin-proposal-class-properties" => Found "fr-mobile-free#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#fr-mobile-free#@storybook#react#@storybook#core-common" depends on it - Hoisted from "_project_#fr-mobile-free#@storybook#react#@storybook#core-common#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#fr-mobile-free#@storybook#react#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#fr-mobile-free#@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#@babel#plugin-proposal-class-properties" => Found "murray-mobile#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#murray-mobile#@storybook#react#@storybook#core-common" depends on it - Hoisted from "_project_#murray-mobile#@storybook#react#@storybook#core-common#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#murray-mobile#@storybook#react#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#murray-mobile#@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#@babel#plugin-proposal-class-properties" => Found "@storybook/csf-tools#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#@storybook#addon-docs#@storybook#csf-tools#@babel#preset-env" depends on it - Hoisted from "_project_#@storybook#addon-docs#@storybook#csf-tools#@babel#preset-env#@babel#plugin-proposal-class-properties" info Disk size without dependencies: "2.21MB" info Disk size with unique dependencies: "2.3MB" info Disk size with transitive dependencies: "8.2MB" info Number of shared dependencies: 30 => Found "metro#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#fr-mobile#@react-native-community#cli#metro#metro-babel-register" depends on it - Hoisted from "_project_#fr-mobile#@react-native-community#cli#metro#metro-babel-register#@babel#plugin-proposal-class-properties" - Hoisted from "_project_#fr-mobile#@react-native-community#cli#metro#metro-react-native-babel-preset#@babel#plugin-proposal-class-properties" info Disk size without dependencies: "496KB" info Disk size with unique dependencies: "592KB" info Disk size with transitive dependencies: "6.47MB" info Number of shared dependencies: 30 => Found "@react-native-community/cli#@babel/plugin-proposal-class-properties@7.13.0" info Reasons this module exists - "_project_#fr-mobile#@react-native-community#cli#metro-react-native-babel-transformer#metro-react-native-babel-preset" depends on it - Hoisted from "_project_#fr-mobile#@react-native-community#cli#metro-react-native-babel-transformer#metro-react-native-babel-preset#@babel#plugin-proposal-class-properties" ✨ Done in 3.26s. ```
@babel/plugin-proposal-private-methods ``` yarn why @babel/plugin-proposal-private-methods  ✔  4s  alan-backend-EXv2AJIq   14:46:08 yarn why v1.19.0 [1/4] 🤔 Why do we have the module "@babel/plugin-proposal-private-methods"...? [2/4] 🚚 Initialising dependency graph... [3/4] 🔍 Finding dependency... [4/4] 🚡 Calculating file sizes... => Found "@babel/plugin-proposal-private-methods@7.13.0" info Reasons this module exists - "_project_#@babel#preset-env" depends on it - Hoisted from "_project_#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#@storybook#builder-webpack4#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#@storybook#core-common#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#@storybook#builder-webpack4#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#@storybook#addon-docs#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray#next#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray#@storybook#react#@storybook#core-common#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#fr-mobile-free#@storybook#react#@storybook#core-common#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray-mobile#@storybook#react#@storybook#core-common#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#@storybook#addon-docs#@storybook#csf-tools#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray#@storybook#react#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#fr-mobile-free#@storybook#react#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray-mobile#@storybook#react#@storybook#core-common#@babel#preset-env#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray#@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#fr-mobile-free#@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#@babel#plugin-proposal-private-methods" - Hoisted from "_project_#murray-mobile#@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#@babel#plugin-proposal-private-methods" info Disk size without dependencies: "20KB" info Disk size with unique dependencies: "116KB" info Disk size with transitive dependencies: "6.01MB" info Number of shared dependencies: 30 ✨ Done in 2.75s. ```
@babel/plugin-proposal-private-property-in-object ``` yarn why @babel/plugin-proposal-private-property-in-object  1 ✘  alan-backend-EXv2AJIq   14:47:55 yarn why v1.19.0 [1/4] 🤔 Why do we have the module "@babel/plugin-proposal-private-property-in-object"...? [2/4] 🚚 Initialising dependency graph... [3/4] 🔍 Finding dependency... error We couldn't find a match! ✨ Done in 2.60s. ```

This is the result just after launching npx sb upgrade. Looks like @babel/plugin-proposal-private-property-in-object doesn't exist in my current dependencies. Looking at the results, seems like we have version conflicts with @babel/plugin-proposal-class-properties. Do you know how we could fix that? Using peerDependencies maybe?

vivshaw commented 3 years ago

@pybuche I ran into this exact issue, and discovered that editing my main Babel config (not my storybook/.babelrc, but the whole project's .babelrc) fixed the problem. This leads me to believe that somehow acorn-jsx was using my main .babelrc instead of the one that Storybook was uising. So, you might try setting loose: true for all these Babel plugins and/or preset-env in your main .babelrc and see if that does anything for you.

Sadly I cannot repro this on a clean repo, and it's on a closed-source project, so I can't provide a good example. :cry:

pybuche commented 3 years ago

@vivshaw thanks for the tip! I finally managed to solve the problem with yarn v2's resolutions config to fix the right versions for Babel plugins and it works like a charm!

davidcalhoun commented 2 years ago

Getting this error again when upgrading @babel/preset-env from 7.15.0 to 7.15.8

existe-deja commented 2 years ago

adding 

plugins: [
    ['@babel/plugin-proposal-private-methods', { loose: true }],
    ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
  ]

to my babel.config.js removed the warnings for sb@6.4.0