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

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

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

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.

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

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.

@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.

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

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.

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

@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.

@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.

@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.

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

yarn add --dev babel-loader@8.0.5

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

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 😃