Missing dependency @babel/plugin-proposal-private-methods ?

[scdataco]

I followed the steps to create a new extension but when I got to the yarn develop step I got the following error:

➜  storybook yarn develop
yarn run v1.22.19
$ webpack serve --hot --port 8080 --https --disable-host-check --config webpack.develop.js
ℹ ｢wds｣: Generating SSL Certificate
ℹ ｢wds｣: Project is running at https://localhost:8080/
ℹ ｢wds｣: webpack output is served from http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from /Users/simon/Projects/looker/storybook
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /Users/simon/Projects/looker/storybook/babel-virtual-resolve-base.js
    at new NodeError (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:203:5)
    at packageResolve (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:873:9)
    at moduleResolve (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:902:20)
    at defaultResolve (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:985:15)
    at resolve (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:999:12)
    at resolve (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:13:10)
    at tryImportMetaResolve (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/config/files/plugins.js:123:45)
    at resolveStandardizedNameForImport (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/config/files/plugins.js:145:19)
    at resolveStandardizedName (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/config/files/plugins.js:154:12)
    at loadPlugin (/Users/simon/Projects/looker/storybook/node_modules/@babel/core/lib/config/files/plugins.js:47:20) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v20.2.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I was able to resolve this by installing the @babel/plugin-proposal-private-methods package, after which yarn develop seems to be working fine:

➜  storybook yarn add @babel/plugin-proposal-private-methods

I'm quite a beginner with modern JS but it seems that package should have been installed by the create extension process? Thanks!

[thomaspessato]

add this to your babel.config.js file:

plugins: [
  ...
  '@babel/plugin-proposal-private-property-in-object',
  ...
]

I also installed these 3 packages:

"@babel/eslint-parser": "^7.24.7",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",

Delete your node_modules folder and your yarn.lock or package.lock files

Run yarn install (or npm install) again