Storybook: Module build failed: Error: Cannot find module '@babel/core'

[josh-gree]

Bug or support request summary

I am trying to start using storybook on a fresh create-react-app project and I am running into an error (at end of this issue). I know that this is not a bug since I can successfully get things working in a node:alpine container. It is therefore an issue with my local setup but I am at a loss to see what it may be! Any help would be much appreciated. Some information;

$ which node
~/.nvm/versions/node/v9.11.1/bin/node
$ which npm
~/.nvm/versions/node/v9.11.1/bin/npm

I am using the most recent (I think) node installed using nvm.

$ create-react-app --version
1.5.2
$ getstorybook --version
3.4.2

I run the following commands;

create-react-app app --use-npm
cd app
getstorybook -N
npm run storybook

The resulting error is the following;

ERROR in ./.storybook/addons.js
Module build failed: Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.Module._load (internal/modules/cjs/loader.js:475:25)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (/Users/joshuagreenhalgh/scratch/app/node_modules/babel-core/index.js:2:18)
    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)
 @ multi ./.storybook/addons.js ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./.storybook/config.js
Module build failed: Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.Module._load (internal/modules/cjs/loader.js:475:25)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (/Users/joshuagreenhalgh/scratch/app/node_modules/babel-core/index.js:2:18)
    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)
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

[danielduan]

Sounds like you might need to run npm i to get @babel/core, either that or you might need to list it as a dependency and directly install it.

[Hypnosphi]

Weird, can't reproduce it on my machine. Can you please share your result of those commands as a reproduction GitHub repo?

[Sommerfeld]

Same issue :/

create-react-app react-example
getstorybook

https://github.com/Sommerfeld/react-storybook-example

[josh-gree]

So fixed by following the slow start process - getstorybook is the issue. As I said it is not reproducible since everything works in a fresh node container. But there must be something weird about my local setup that is interacting badly...

[Sommerfeld]

warning "[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "[email protected]" has incorrect peer dependency "babel-core@6".

Fixed it by installing correct peer dependencies.

yarn add babel-core@6 --dev
yarn add @babel/core@^7.0.0-0 --dev

[Hypnosphi]

Looks very similar to https://github.com/storybooks/storybook/issues/3384

Is there a chance that you have some old version of yarn installed?

[Hypnosphi]

Will be fixed with releasing #3453