Cannot build v4.0.0-alpha.17: missing @babel dependency #4071

alexkrautmann · 2018-08-24T19:56:51Z

If you are reporting a bug or requesting support, start here:

Bug or support request summary

After upgrading all storybook deps to the latest alpha (v4.0.0-alpha.17), start-storybook fails with with an error about missing @babel/plugin-proposal-class-properties in @storybook/core.

Steps to reproduce

install storybook deps in project
run start-storybook -p 6006 -c .storybook

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/[email protected]
@storybook/[email protected]
@storybook/[email protected]
@storybook/[email protected]
@storybook/[email protected]
@storybook/[email protected]
@storybook/[email protected]
@storybook/[email protected]

Affected platforms

macos

Screenshots / Screencast / Code Snippets (Optional)

14:45 $ yarn storybook
yarn run v1.9.2
$ start-storybook -p 6006 -c .storybook
internal/modules/cjs/loader.js:550
    throw err;
    ^

Error: Cannot find module '@babel/plugin-proposal-class-properties'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.resolve (internal/modules/cjs/helpers.js:18:19)
    at Object.<anonymous> (/Users/alexkrautmann/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/@storybook/core/dist/server/config/babel.js:13:117)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
error Command failed with exit code 1.

The text was updated successfully, but these errors were encountered:

shilman · 2018-08-25T21:12:34Z

Released a fix. Please give it a try!

https://github.com/storybooks/storybook/releases/tag/v4.0.0-alpha.18

alexkrautmann · 2018-08-25T23:07:53Z

I installed all storybook deps to alpha.18,and now get a different error running storybook.

ERROR in multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
Module not found: Error: Can't resolve 'babel-loader' in '/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript'
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true iframe[2]

ERROR in multi ./.storybook/addons.js ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript'
 @ multi ./.storybook/addons.js ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js manager[0]
ℹ ｢wdm｣: Failed to compile.

I did the following:

pulled down storybook repo
installed [email protected] (babel 6) in core and workspace
yarn install and bootstrap --all
linked every storybook dep I use into my project
ran dev in storybook project
ran my storybook

ERROR in multi /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/polyfills.js /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
Module not found: Error: Can't resolve 'babel-loader' in '/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript'
 @ multi /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/polyfills.js /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true iframe[2]

ERROR in multi ./.storybook/addons.js /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/polyfills.js /Users/alex/repos/github.com/storybook/lib/core/dist/client/manager/index.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript'
 @ multi ./.storybook/addons.js /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/polyfills.js /Users/alex/repos/github.com/storybook/lib/core/dist/client/manager/index.js manager[0]
ℹ ｢wdm｣: Failed to compile.

I can see in this error that I am properly linked.

I then tried installing [email protected] (babel 7) in storybook lerna and core and get:

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
    at throwVersionError (/Users/alex/repos/github.com/storybook/node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
    at Object.assertVersion (/Users/alex/repos/github.com/storybook/node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
    at _default (/Users/alex/repos/github.com/storybook/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:81:7)
    at /Users/alex/repos/github.com/storybook/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at Function.memoisePluginContainer (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-loader/lib/index.js:50:20)
    at /Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:434:13)
 @ multi /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/polyfills.js /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true iframe[2]

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
    at throwVersionError (/Users/alex/repos/github.com/storybook/node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
    at Object.assertVersion (/Users/alex/repos/github.com/storybook/node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
    at _default (/Users/alex/repos/github.com/storybook/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:81:7)
    at /Users/alex/repos/github.com/storybook/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at Function.memoisePluginContainer (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-loader/lib/index.js:50:20)
    at /Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/alex/repos/github.com/alexkrautmann/lerna-workspaces-typescript/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:434:13)
 @ multi ./.storybook/addons.js /Users/alex/repos/github.com/storybook/lib/core/dist/server/config/polyfills.js /Users/alex/repos/github.com/storybook/lib/core/dist/client/manager/index.js manager[0]

This is a typescript project, so I don't want to have babel or babel loader in my project. I would expect these deps to be handled in storybook.

Just to test it out I installed @babel/core and [email protected] in my typescript project and storybook builds and runs fine.

Everything worked for me on storybook alpha 16.

EDIT: after re-reading this comment I realized I might have incorrectly installed babel-loader in storybook the first time, I am trying again. Sorry about that, I am new to using lerna/workspaces so it has been a struggle working with all these deps across packages and symlinks.

EDIT2: I tried older babel-loader in core and root, and for some reason I get Error: Requires Babel "^7.0.0-0", again with that. Def confused on this, I figured it would be as easy as adding the dep but its a bit harder than I expected.

Hypnosphi · 2018-08-27T19:37:33Z

Do you have a .babelrc file?

Hypnosphi · 2018-08-27T19:39:21Z

This is a typescript project, so I don't want to have babel or babel loader in my project. I would expect these deps to be handled in storybook.

We need to support different versions of babel so having babel-loader as a peer dependency is an inevitable evil

alexkrautmann · 2018-08-27T19:59:16Z

Do you have a .babelrc file?

I have a .babelrc under .storybook/.

We need to support different versions of babel so having babel-loader as a peer dependency is an inevitable evil

The thing is, I don't use babel-loader anywhere in the project proper. I do have babel-plugin-require-context-hook in my storyshots jest config as well as the mentioned .storybook/.babelrc.

I just looked over alpha.17, which is what caused the peerDep on babel-loader: #3746. Adding the additional babel-loader dep isn't the end of the world, but I would prefer it be managed by storybook directly. Thanks for taking the time looking into this and getting in the quick fix over the weekend!

Cheers 🥂

alexkrautmann · 2018-08-27T20:08:15Z

I went ahead and installed alpha.18. It also requires I install @babel/core as I mentioned in a previous message. It really is unfortunate I have to add 2 deps for storybook that I don't actually use in my project. I'm not sure if this truly is a bug or intended, I imagine this changes the barrier of entry to using storybook on existing projects.

At this point though, it is a different issue.

Hypnosphi · 2018-09-01T17:57:45Z

I don't use babel-loader anywhere in the project proper.

But your storybook does. And to know which version to use, we need it to be installed on your side. And yes, you also need to install either babel-core@6 or @babel/core@7. This shouldn't be a barrier for newcomers though, as we add those dependencies in getstorybook command.

I have a .babelrc under .storybook/.

How does it look?

sregg · 2018-09-04T16:21:02Z

getstorybook also gives me this Error: Cannot find module '@babel/core'

npm i -g @storybook/[email protected]
getstorybook
see error:

module.js:549
    throw err;
    ^

Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/@storybook/cli/node_modules/@babel/register/lib/cache.js:19:37)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

Hypnosphi · 2018-09-04T17:48:21Z

Thanks @sregg, #4117 should fix it

alexkrautmann changed the title ~~Cannot build v4.0.0-alpha.17: missing @babel dependencies~~ Cannot build v4.0.0-alpha.17: missing @babel dependency Aug 24, 2018

Hypnosphi self-assigned this Aug 25, 2018

Hypnosphi added bug configuration babel / webpack labels Aug 25, 2018

Hypnosphi mentioned this issue Aug 25, 2018

Add missing @babel/plugin-proposal-class-properties dependency #4076

Merged

shilman closed this as completed Aug 25, 2018

Hypnosphi mentioned this issue Sep 4, 2018

CLI: Add missing @babel/core dependency #4117

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot build v4.0.0-alpha.17: missing @babel dependency #4071

Cannot build v4.0.0-alpha.17: missing @babel dependency #4071

alexkrautmann commented Aug 24, 2018 •

edited

Loading

shilman commented Aug 25, 2018

alexkrautmann commented Aug 25, 2018 •

edited

Loading

Hypnosphi commented Aug 27, 2018

Hypnosphi commented Aug 27, 2018

alexkrautmann commented Aug 27, 2018

alexkrautmann commented Aug 27, 2018

Hypnosphi commented Sep 1, 2018 •

edited

Loading

sregg commented Sep 4, 2018

Hypnosphi commented Sep 4, 2018

Cannot build v4.0.0-alpha.17: missing @babel dependency #4071

Cannot build v4.0.0-alpha.17: missing @babel dependency #4071

Comments

alexkrautmann commented Aug 24, 2018 • edited Loading

Bug or support request summary

Steps to reproduce

Please specify which version of Storybook and optionally any affected addons that you're running

Affected platforms

Screenshots / Screencast / Code Snippets (Optional)

shilman commented Aug 25, 2018

alexkrautmann commented Aug 25, 2018 • edited Loading

Hypnosphi commented Aug 27, 2018

Hypnosphi commented Aug 27, 2018

alexkrautmann commented Aug 27, 2018

alexkrautmann commented Aug 27, 2018

Hypnosphi commented Sep 1, 2018 • edited Loading

sregg commented Sep 4, 2018

Hypnosphi commented Sep 4, 2018

alexkrautmann commented Aug 24, 2018 •

edited

Loading

alexkrautmann commented Aug 25, 2018 •

edited

Loading

Hypnosphi commented Sep 1, 2018 •

edited

Loading