Storybook: Cannot find module 'babel-loader/package.json'

[jasperdunn]

Describe the bug
When running storybook yarn storybook after upgrading to 4 I'm getting these errors:

Error: Cannot find module 'babel-loader/package.json'
at module.exports
at isBabelLoader8
at _default
at Object.babel
at accumulationPromise.then.newConfig
at process.internalTickCallback 

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from '/Users/path'
- If you want to resolve "react", use "module:react"
- Did you mean "@babel/react"?

System:

• OS: MacOS
• Device: Macbook Pro 2016
• Framework: react
• Version: 4.0.2

[igor-dv]

babel-loader is now a peer dep. Take a look at https://github.com/storybooks/storybook/blob/master/MIGRATION.md

[pascalduez]

Hi,

having the same issue.
The project uses Babel 7.
See https://github.com/pascalduez/react-module-boilerplate

So the migration guide is actually misleading:

If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:

Actually the loader must be installed in any case, whether using Babel or not.

[jasperdunn]

Hi,

After adding _babel-loader_ and _@babel/core_
I'm still having the error

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react'

The project is using CRA

here is the babel config

// .babelrc
{
  "presets": [
    "react",
    "stage-0"
  ],
  "plugins": [
      [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]
}

[TimonVS]

I'm also getting this error and I'm using create-react-app, it worked fine with 4.0.6.

[TimonVS]

I solved it by adding @babel/core and babel-loader to my devDependencies. You can also achieve this by running npx -p @storybook/cli sb init -f notice the -f option, this will overwrite your Storybook config, but you can easily change it back by reverting the change to the config.

[jasperdunn]

My team was using .babelrc
Doing some research and poking around, I changed the file from

{
  "presets": [
    "react",
    "stage-0"
  ],
  "plugins": [
      [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]
}

to

{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
      [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]
}

this fixed the issue for me :)

[caseybaggz]

@TimonVS this breaks yarn test due to CRA recognizing a self-declared dependency the project has already installed for those who are using testing in their app.

[wlee367]

Hi, I followed @jasperdunn and @TimonVS ' comments and I was able to get storybook up running and the react app up and running using npx create-react-app taskbox and npx -p @storybook/cli sb init. Just like @caseybaggz said, this breaks yarn test.

How should I go about resolving this? If I follow the instructions that come up from the error messages, i.e., removing babel-loader from package.json, my storybook breaks.

EDIT:
this is also a known issue in #5183 and the temp solution to my problem was https://github.com/storybooks/storybook/issues/5183#issuecomment-454333915

[worc]

shouldn't this issue still be open? if storybook doesn't work without babel-loader, then it's not really an optional, peer dependency.

[anton6]

I also got "Error: Cannot find module 'babel-loader/package.json'" when running yarn run storybook.

Adding babel-loader seems to fix it yarn add -D babel-loader

But I am a bit surprised that I needed to do this step after running npx storybook

[devdigital]

This is still an issue, if you add babel-loader when using create-react-app, and it's not the expected version, then you'll receive the following:

There might be a problem with the project dependency tree.

It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.5"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree

[revmischa]

Yes I'm seeing this too, @devdigital

[yehnah]

It works if you install the exact expected version from both react scripts and storybook:

yarn add --dev [email protected]

[ivan-kleshnin]

Pls. reopen as it will break after each react-scripts and storybook dep change.

[shilman]

@mrmckeb Is what @ivan-kleshnin said true, or are we able to use the one out of react-scripts now?

[halfmatthalfcat]

If you change the your custom Storybook webpack.config.js to resolve babel-loader via:

loader: require.resolve('babel-loader', { paths: [ 'node_modules/react-scripts' ]}),

it starts working for a longer term solution until it's actually fixed.

[Hongbo-Miao]

Got same error after this pull request which upgrading

@babel/preset-env 7.7.1 -> 7.7.4
@babel/preset-typescript 7.7.2 -> 7.7.4

UPDATE:
After another PR update: react-scripts from 3.2.0 -> 3.3.0
the issue disappeared.

[falnos24865]

Also want to mention for Typescript users this dependency is annoying. We have no need for anything babel, so adding it just for Storybook is a bit of a blocker.

[mrmckeb]

@falnos24865 Unfortunately it's needed by Storybook itself. I personally wouldn't consider it a blocker - if it was included by Storybook as a dependency, it would still be there - the way it is now, users have control over the exact version of babel-loader used.

[falnos24865]

@mrmckeb I would not mind if it was included as its own dependency, but forcing it be the used at the top level is not desirable. One of the main reasons I use Typescript is to avoid having to deal with Babel at all, so I would prefer if this was a dependency of Storybook and not a peer dependency. Other popular libraries (Jest, etc) include these internal tools as deps, not peerDeps (I don't have to install Mocha alongside Jest, etc). Peer dependencies add an extra layer of confusion and frustration that is not needed IMHO.

[mrmckeb]

@falnos24865, if it is not installed at the top level, it can conflict with other installed versions of the loader. We've seen this with Creact React App as an example.

You'll note that most dependencies are handled as you suggest. This is about managing versions effectively.