Storybook: babel-loader conflicts with create-react-app 2.1.3

+1

Does this mean we should not install babel-loader for CRA apps?

Hmm when I remove babel-loader dep then storybook breaks... 😕

Having the same issue 😕

Same issue... any workaround yet?

@ayoola-moore Yes, the workaround is to change the line in package.json to:

"babel-loader": "8.0.4"

This way both react-scripts and storybook will work. Still looking into a better solution. :confused:

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonadox @fuadajip @AMTourky @greatermeans @tmeasday @Eugene-Sviridov @nerfologist

@shilman, I'm also thinking about this. We could consider exposing babel-loader from react-scripts... that might help. There was a recent PR that did something similar for chalk (https://github.com/facebook/create-react-app/pull/6150).

Alternatively, would it just be easier if this was a dependency of @storybook/react? Rather than a peer-dependency. I realise that might cause issues for non-CRA users though.

Or, we could, when react-scripts exists, directly import babel-loader from react-scripts/node_modules/babel-loader. We already load the config from the react-scripts folder.

@igor-dv @ndelangen @tmeasday any opinions on the options that @mrmckeb has laid out above? Is this something we can handle with a CRA preset?

The workaround doesn't seem to work for me. I still see the conflicts after trying the workaround.

The workaround doesn't seem to work for me. I still see the conflicts after trying the workaround.

Make sure you remove the leading "^" otherwise you will still get 8.0.5

I think we could probably require babel-loader out of whereever react-scripts finds it (using requireFrom or the like, although if react-scripts exported it that would make it easier) if we are using CRA's webpack config.

A preset would make that nicer but I think we already have special case code for CRA (to use it's config) so maybe it would be relatively easy to do this there?

The workaround doesn't seem to work for me. I still see the conflicts after trying the workaround.

Make sure you remove the leading "^" otherwise you will still get 8.0.5

This is what I have in my package.json: "babel-loader": "8.0.4"

Are there other steps that need to be taken for the work around?

@jlmelis, what version of "react-scripts" is installed? I can confirm that for "react-scripts": "2.1.3" workaround seem to be working fine

@vsubbotskyy - I am running create-react-app with npx. The version it shows is 2.1.3. Something probably else screwy with my set up. I'll just keep an eye on this to see if a fix comes through. Thanks!

I was able to get the work around working. Thanks

I had a look around, and I think at this stage it'll be easier to require in the loader from CRA (when CRA is used). I'll make a PR now.

@tmeasday, it would be great if you could take a look at and provide feedback on PR #5308.

I have been through the same issue and finally fixed it. I changed the babel-loader back to "8.0.4"in my package.json file and needed to delete the package-lock json file and I was then able to start and test with storybook. I hope this is helpful.

" _I changed the babel-loader back to "8.0.4"in my package.json_"
I hope that is not the solution and will be fixed soon because it's blocking us to update react-scripts :/
thanks

+1

Sorry all, I was out of action for 1.5 weeks and didn't chase the review on this. Doing so now.

Still having the same issue

Thanks @oscargws, we're actively investigating this and #5308 was raised to solve this. @ndelangen, can you take a look at that PR?

@mrmckeb ah very nice. For anyone else having the problem, manually changing the babel-loader version in package.json has fixed it for me!

Does anybody know what exactly broken there? it's a patch version bump, seems strange to me.

@igor-dv, the issue is that CRA expects an exact version match - and if something is installed to package.json that conflicts, it throws an error. So, anytime CRA is a version or two behind (even if a patch version), users can see this error after installing Storybook.

The solution here is to use CRA's version of babel-loader when working with CRA, so that this issue doesn't occur.

The following workaround works for me:

Changing the line in package.json to "babel-loader": "8.0.4" seems to fix it.

Any updates about this one? can't solve it by just adding "babel-loader": "8.0.4" or any of the other steps

Any updates about this one? can't solve it by just adding "babel-loader": "8.0.4" or any of the other steps

I was able to resolve it by adding babel-loader 8.0.4 as both a dependency and a peer dependency.

I was able to resolve it by adding babel-loader 8.0.4 as both a dependency and a peer dependency.

Unfournatatley not for me, mine is asking me for babel-loader": "8.0.5, not sure if that makes a difference, also, when I run npm ls babel-loader it throws this:

├── [email protected] 
└─┬ [email protected]
  ├── [email protected]  deduped
  └─┬ [email protected]
    └── [email protected]

@Rolando-Barbella Try to pin the version through the resolution field in your package.json to 8.0.4

I changed version from 2.1.2 to 2.1.5 then it resolved

Yes, this is a good workaround for now @nguyentuandat, but only temporary until we work out how to handle this properly.

Updating react-scripts worked for me (thx, @nguyentuandat). I was on 2.1.1, updated with instructions from the changelog:

yarn add --exact [email protected]

After trying everything over here, I found the solution.

Just open .profile in a text editor (it is hidden in the Home directory so press Ctrl + H )

Just paste this line at the bottom of the .profile

export PATH=$HOME/.node_modules_global/bin:$PATH

and Voila....it works

Using "react-scripts": "2.1.8" and storybook v5, I'm getting the same error.
As stated by others, manually adding "babel-loader": "8.0.4" as a devDependency fixed it.

Installing "react-scripts": "2.1.5", and "@storybook/react": "^4.1.4", using Yarn.

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: babel-loader (version: 8.0.4)

Running npm ls babel-loader throws this:
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└─┬ UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY [email protected]

babel-loader is not present in my package.json. And adding the 8.0.4 version as a devDependency doesn't fix the issue for me.

npm i works as expected. But when trying to npm start I find the same issue :

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:
.../node_modules/babel-loader (version: 8.0.4)

Good golly!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 containing PR #5308 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

I just tried the latest beta build. We are using storybook with [email protected] and the Typescript setup described here: https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-with-babel-loader

This fails though as the require cannot find the CRA babel-loader. Is there already a solution for that?

@mrmckeb know anything about this?

I just tried the latest beta build. We are using storybook with [email protected] and the Typescript setup described here: https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-with-babel-loader

This fails though as the require cannot find the CRA babel-loader. Is there already a solution for that?

Yeah, I got the same problem as well with "react-scripts": "3.0.1"

This is what I've got after adding storybook to the codebase:

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

  "babel-jest": "24.7.1"

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

  /xxx/node_modules/babel-jest (version: 24.8.0) 

• devDependencies

"typescript": "3.4.5",
"@storybook/react": "^5.0.11",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@babel/core": "^7.4.4",
"babel-loader": "^8.0.6"

• npm ls babel-jest

└─┬ [email protected]
  ├── [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected] 

Hi @patricknick and @wxqee, you shouldn't have any custom configuration if you're using CRA :) TypeScript works out-of-the-box. Try it with a fresh install, no custom config, and let me know if it isn't working for you.

@shilman - perhaps we should update the docs to reflect this?

The babel-jest issue should be resolved in the latest version of CRA @ummahusla - if not, please raise it over at https://github.com/facebook/create-react-app/issues.

Hi @mrmckeb, thank you for your help! I just tried your solution and removed my custom webpack.config.js:

// @ts-check

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Unfortunately, this results in the following error:

ERROR in ./.storybook/config.tsx 22:32
Module parse failed: Unexpected token (22:32)
You may need an appropriate loader to handle this file type.
 addDecorator(story => {
   const DefaultRoute = props => <div id="router">{story()}</div>;
   return (
    <BrowserRouter>

This is my config.tsx:

import { withOptions } from '@storybook/addon-options';
import { addDecorator, configure } from '@storybook/react';
import { Grommet } from 'grommet';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import GlobalStyle from '../src/globalStyles';
import '../src/i18n';
import { theme } from '../src/theme/index';

// automatically import all files ending in *.stories.tsx
const req = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

withOptions({
  addonPanelInRight: true,
});

addDecorator(story => {
  const DefaultRoute = props => <div id="router">{story()}</div>;
  return (
    <BrowserRouter>
      <DefaultRoute default />
    </BrowserRouter>
  );
});
addDecorator(story => (
  <>
    <GlobalStyle />
    {story()}
  </>
));
addDecorator(story => <Grommet theme={theme}>{story()}</Grommet>);

configure(loadStories, module);

Could give me a hint on this? Thanks!

I'm getting the same issue. It seems to be very unhappy about parsing JSX.

@mrmckeb I just released @storybook/preset-typescript and need to update the typescript docs anyway. If you let me know what I should say about Typescript and CRA, I'd be happy to work that into the update. Thanks! 🙇

Thanks @shilman. The CRA preset uses the CRA config under the hood, so it has support for everything CRA can do - TypeScript, CSS modules, Sass, etc. Basically, nothing is required for this to work, just install and go!

Ran into the above babel-loader issue as mentioned, with the addition of setting up Storybook it blew up my CRA. I installed the @storybook/[email protected] release. Storybook will build and run, but none of my Stories/Components populate in the UI. And stdout all my stories are throwing these warnings.

WARNING in ./stories/core.stories.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /project-ui/stories/core.stories.js: Unexpected token (14:47)
  13 | storiesOf('core/component', module)
> 14 |   .add('standard text', () => <Component block={FIXTURE} />)

Tried other variations and none work...

const FIXTURE = {..some-data...}

storiesOf('core/component', module)
   .add('standard text', () => (<Component block={FIXTURE} />))

Reverting back to 5.0.11 it works again for Storybook builds and no longer throws warnings. And my CRA is working again... Do I need to do something else for the upgrade path? Just setup storybook yesterday so new to the project.

Right now things are working again... but have concern about the state of my environment regarding the release of 5.1.x.

Just in case anyone else lands in the same situation as me: I couldn't for the life of me get the Storybooks + CRA integration to work, where Storybooks uses the build setup of CRA. However, I then tried to move my stories into the src/ directory of my CRA project, and suddenly it worked. I don't know why, or if it has been recommended or required all along, but this fixed it for me.

I'm having this problem too, with a new CRA typescript app. Very latest CRA from master and storybook 5.0.11

@revmischa are your stories under src/?

Yes @shilman - I'm basically just running CRA then sb init: https://github.com/jetbridge/create-react-app/pull/1/files#diff-0ae46a2383dedcac5f5e369f5ca5f169R35

The stories are inside src/.

=> Found "[email protected]"
info Has been hoisted to "babel-loader"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "520KB"
info Disk size with transitive dependencies: "1.28MB"
info Number of shared dependencies: 18
=> Found "jetbridge-react-scripts#[email protected]"
info This module exists because "jetbridge-react-scripts" depends on it.
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "536KB"
info Disk size with transitive dependencies: "2.4MB"
info Number of shared dependencies: 29
=> Found "babel-preset-react-app#[email protected]"
info This module exists because "@storybook#react#babel-preset-react-app" depends on it.
info Disk size without dependencies: "1020KB"
info Disk size with unique dependencies: "1.45MB"
info Disk size with transitive dependencies: "3.32MB"
info Number of shared dependencies: 29

If I remove it from devDependencies:

=> Found "[email protected]"
info Reasons this module exists
   - "jetbridge-react-scripts" depends on it
   - Hoisted from "jetbridge-react-scripts#babel-loader"
   - Hoisted from "@storybook#react#babel-preset-react-app#babel-loader"
info Disk size without dependencies: "92KB"
info Disk size with unique dependencies: "552KB"
info Disk size with transitive dependencies: "2.41MB"
info Number of shared dependencies: 29

Looks like I had a different version in a project in an enclosing folder.

I moved all my stories from ./stories/* to ./src/stories/* and updated my .storybook/config.js and now things are working with the @storybook/[email protected]. Having just set this up the other day, the docs/setup guide for React will be out-of-date for those coming in with a fresh CRA setup.

Otherwise, issue looking fixed 👍

Hi all, yes, please be sure to remove your babel-loader and do a quick spot check to see if it's listed somewhere else.

You can also tell CRA to skip that check if you want, but it's there for safety...

I'm still having this issue with @storybook/react 5.0.11 and the latest create-react-app from master.
The problem is that CRA wants babel-loader 8.0.5 and running sb init adds "babel-loader": "^8.0.6" to my packages.json
So what about detecting what babel-loader CRA already requires and add that? or just skip adding babel-loader to package.json in sb init if CRA is detected? keeping the two exact versions in sync between storybook and CRA is not a solution for anything, based on the history of this issue.

Please i really need help.

i try everything but enything work.

`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:

c:\Users\Z-Dra\node_modulesbabel-loader (version: 8.0.6)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

2. Check if c:\Users\Z-Dra\node_modulesbabel-loader is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

3. Try running npm ls babel-loader in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Z-Dra\AppData\Roaming\npm-cache_logs\2019-05-29T12_53_58_726Z-debug.log`

Please some one can help me?

I discovery that I have babel-loader 8.0.6 installed globally on my home directory /home/user/node_modules, so under my project directory was installed babel-loader 8.0.5, so I remove npm remove babel-loader on my home directory(8.0.6), than all work fine.

This is a dumb question I'm sure but...
If I'm using typescript, what do I need babel for?

Thanks @shilman, but the pre-release doesn't seem to be fix the babel-loader issue.

Steps taken:

1. Install latest Typescript ver. of CRA (react-script 3.0.1) via npx create-react-app my-app --typescript
2. npx -p @storybook/cli sb init --type react
3. Configure storybook for TS using instructions in https://storybook.js.org/docs/configurations/typescript-config/ & demo https://github.com/johot/storybook4-cra2-typescript-react-docgen-typescript-demo (note: webpack.config.js in demo is outdated and is fixed here: https://github.com/storybookjs/storybook/issues/5877#issuecomment-470186882)
4. Delete yarn.lock & node modules folder.
5. Remove @babel/core & babel-loader dev depedencies from package.json
6. yarn add -D @storybook/react@next
7. yarn
8. yarn storybook - Error: Cannot find module 'babel-loader'

Package.json deps:

  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.4",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "styled-components": "^4.2.1",
    "typescript": "3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5", // I added this back the first time I got babel-loader missing error, but this still doesn't solve it.
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.1.0-rc.3",
    "@testing-library/react": "^8.0.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-links": "^3.3.4",
    "@types/storybook__addons": "^4.1.0",
    "@types/storybook__react": "^4.0.1",
    "husky": "^2.3.0",
    "jest-dom": "^3.4.0",
    "lint-staged": "^8.1.7",
    "prettier": "^1.17.1",
    "react-docgen-typescript-loader": "^3.1.0"
  },

Basic Setup without Typescript does not even work for me

1. npx create-react-app my-app
2. cd my-app
3. npx -p @storybook/cli sb init --type react

CRA expects "babel-loader": "8.0.5" but finds 8.0.6. However the generated packages.json hsa following devDependencies listed:

  "devDependencies": {
    "@storybook/react": "^5.0.11",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6"
  }

Setting the version to "babel-loader": "8.0.5" does resolve this issue.

Also I have a similar Issue in another project where CRA (3.0.1) expectes "webpack": "4.29.6" but finds 4.32.2. That is not defined in my dependecird inside the package.json
npm ls webpack shows:

+-- @storybook/[email protected]
| +-- @storybook/[email protected]
| | `-- [email protected]  deduped
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]
  `-- [email protected]  deduped

[email protected] provides a newer version of webpack, but CRA wants an older version.
Adding [email protected] to the dependencies does fix it. Not quite sure if this is an issue with storybook thou..

@vipyoshi A couple comments:

• You shouldn't pass --type react. Let it use the CRA template instead.
• This is fixed in the latest version @storybook/cli@next and we're releasing that as stable in the next 24h.

Seriously though why is babel needed if I'm using TypeScript?

@shilman @mrmckeb with the latest version:

"@storybook/addon-actions": "^5.1.1",
"@storybook/addon-links": "^5.1.1",
"@storybook/addons": "^5.1.1",
"@storybook/react": "^5.1.1",

JSX syntax is not transformed in .storybooks/config.js and start-storybook fails with a syntax error (on the first <).

Using the previous workaround of having babel-loader installed but with the version in sync with CRA works fine.

I tried to check if CRA uses babel-preset-react in some but not all folders but didn't get anywhere.

For context, I'm using CRA 3.0.1 and haven't ejected.

What else could be the issue (should I open one)?
How can I help?

_{PS: I'm using a decorator for global styles btw.}

JSX syntax is not transformed in .storybooks/config.js and start-storybook fails with a syntax error (on the first <).

@rlecaro2 Exact same issue here!

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../Documents/pro/workshop/workshop-atomic-design/.storybook/config.js: Unexpected token (9:34)

>  9 | const themeDecorator = storyFn => <ThemeProvider theme={Theme}>{ storyFn() }</ThemeProvider>
     |                                   ^
  10 | addDecorator(themeDecorator);
  11 | configure(loadStories, module);

(declaring babel-loader to v8.0.5 in devDependencies also fixes that issue)

@revmischa Babel is how you can use TypeScript. The TS team give two paths - the TypeScript compiler, or a Babel plugin.

@rlecaro2 and @Akaryatrh, we made a change some months ago, where in the latest Storybook releases, babel-loader is not installed alongside CRA, and is instead found from within CRA.

As I understand it, you have no issues at all - apart from the fact that files within .storybook are not being processed correctly. This is because Create React App's config ignores files outside of source.

We made a small change to allow for TypeScript inside the .storybook directory here, and could do the same for the rest of the config. I'm assuming you're both not using TypeScript which is why that fix didn't work for you.

I'm a little confused why that devDependencies fix works though... I think that also needs investigation.

Also note that this is a new issue, not related to the above. As comments here alert all users, I've created a new ticket here: #7201. Please add details there.

Great! I'll try to figure out what's making the dev dependency work. Just for anyone else, the issue is #7201 (minor typo).

@ramonex1

Yes for me it’s just a stupid think.

It’s another node modules in my folders

This still isn't working for me, I've seen this issue a bunch around but can't seem to find a definitive fix / upgrade path or guidelines on how to fix.

FYI we've got some game-changing work on CRA support coming from @mrmckeb -- hopefully will make reasoning about these issues a lot easier

I also face the same issue , and also fixed it. My project name is 'idash2' and I install it on

code/web/frontend/idash2

But the problem is I accidentally installed node_modules on this directory

code/web/frontend

After I remove code/web/frontend/node_modules and reinstall react app again , problem solved.

Credit for this solution: Parinya Onsuwan

I am having the same problem and nothing seems to work... is there a permanent working solution for this issue?

@isenese I believe this is part of https://www.npmjs.com/package/@storybook/preset-create-react-app or will be shortly

@isenese, sorry I have been out of action a bit recently.

This is resolved in new versions of Storybook, or at least should be - please provide version details if you're still facing this and we can help out.

Hello, I am a CRA user and faced this problem when I initialized storybook by the following command described in the document for React.

npx -p @storybook/cli sb init --type react

Then, I fixed the problem by initializing with the following.

npx -p @storybook/cli sb init --type react_scripts

(And the automatic detection without --type option was also successful. cool!)

I think this is a lack of documentation and can make such kind of mistakes.
Please add explanation about --type react_scripts to the Storybook for React page or create a separate tutorial for CRA.

Thanks!

We're also trialing a new preset for CRA, which would replace the built-in preset for CRA. This should make future set-up easier.

Hello, I am a CRA user and faced this problem when I initialized storybook by the following command described in the document for React.

npx -p @storybook/cli sb init --type react

Then, I fixed the problem by initializing with the following.

npx -p @storybook/cli sb init --type react_scripts

(And the automatic detection without --type option was also successful. cool!)

I think this is a lack of documentation and can make such kind of mistakes.
Please add explanation about --type react_scripts to the Storybook for React page or create a separate tutorial for CRA.

Thanks!

Thank you so much! I was going bananas with this.

Thanks guys, I'll make a note to update that documentation.

@mrmckeb still running into the same problem (CRA 3.3 + Storybook 5.2.8) and nothing can be found in the docs about the react_scripts flag - would be great to have it there so others wouldn't need to go through the GH issues to find this... 🎉

@aericson, sorry for the inconvenience. I'll look today.

Note, this is in the advanced config. It says:

You may have tried to use our quick start guide to setup your project for Storybook. If it failed because it couldn’t detect you’re using React, you could try forcing it to use React.

I'll update to mention CRA too.

@mrmckeb I think it's more about only finding

npx -p @storybook/cli sb init --type react

but not

npx -p @storybook/cli sb init --type react_scripts

in the docs when looking at:

• https://storybook.js.org/docs/guides/quick-start-guide/
• https://storybook.js.org/docs/guides/guide-react/

so you think you're doing everything correct by using --type react when you have a CRA repo.

using --type react led to Cannot find module 'babel-jest' errors - --type react_scripts is working out of the box.

Understood, and the docs are now updated @pkyeck :)

I think overall, that part of the docs should be clearer... I hope the revision in #9182 is. @shilman will release soon I think.

When you have babel-loader on package.json, you can't build the application. The best solution that i got is:
`

"devDependencies": {
"@babel/core": "^7.12.3",
"@storybook/addon-actions": "^6.0.28",
"@storybook/addon-essentials": "^6.0.28",
"@storybook/addon-links": "^6.0.28",
"@storybook/node-logger": "^6.0.28",
"@storybook/preset-create-react-app": "^3.1.5",
"@storybook/react": "^6.0.28",
"@testing-library/dom": "^7.26.5",
"@testing-library/react-hooks": "^3.4.2",
"@types/react": "^16.9.56",
"@types/react-dom": "^16.9.9",
"@types/styled-components": "^5.1.4",
"babel-loader": "8.1.0",
"babel-eslint": "^10.1.0",
"eslint-config-prettier": "^6.14.0",
"eslint-config-react-app": "^5.2.1",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-flowtype": "^4.7.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-styled-components": "^7.0.3",
"json-server": "^0.16.2",
"msw": "^0.21.3",
"prettier": "^2.1.2",
"react-docgen-typescript-plugin": "^0.6.0",
"react-is": "^17.0.1",
"react-test-renderer": "^17.0.1"
},
"resolutions": {
"/react-scripts//babel-loader": "^8.1.0"
}

`

The attibute resolution using the same lib of babel-loader.

Confirming that this is still an issue with the latest versions of creat-react-app and storybook.

Edit: create-react-app will complain about an incorrect babel-loader version in node_modules. I was able to resolve the issue using yarn add -D --exact [email protected], which was the version that CRA required.

Can confirm I'm also running into this, Can we reopen this issue? I dont really want to have to include babel-loader in my package if im not using it my self?
I can confirm @DylanCulfogienis fix works though!

we no longer install babel-loader into CRA apps, so I don't think we need to re-open the issue @eglavin

is it still failing for you on a fresh install?

same issue here

we no longer install babel-loader into CRA apps, so I don't think we need to re-open the issue @eglavin

is it still failing for you on a fresh install?

Same issue here, if your app needs to run with storybook then you still need to include babel-loader.

Babel-loader is already included in CRA and storybook can just use that one. No?

This is still an issue on fresh installs of the latest CRA/SB versions (4.0.1 and 6.1.18, respectively, at the time of this writing).

Also ran into this when installed CRA v4 with SB v6.1:

Same problem here : React 4.0.1 and

yarn install @storybook/react 

front  | There might be a problem with the project dependency tree.
front  | It is likely not a bug in Create React App, but something you need to fix locally.
front  | The react-scripts package provided by Create React App requires a dependency:
front  |   "babel-loader": "8.1.0"
front  | Don't try to install it manually: your package manager does it automatically.
front  | However, a different version of babel-loader was detected higher up in the tree:
front  |   /path/to/front/node_modules/babel-loader (version: 8.2.2) 

PS : Should we open a new issue as it concern different version of the same problem ?

Very thanks @DylanCulfogienis , you saved my day!! I spend hours to remove and install storybook and even the hold node_modules dir again and agian, and yarn add -D --exact [email protected] did work!

I have a Monorepo and I added babel-loader to my React web package as above (8.1.0). It resolved the babel-loader error but created new errors:

../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2982,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2995,13): error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2996,13): error TS2717: Subsequent property declarations must have the same type.  Property 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(2997,13): error TS2717: Subsequent property declarations must have the same type.  Property 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

I was able to resolve this by upgrading the version of @types/react-dom to "17.0.0".

@DylanCulfogienis solution fixed it for me as well, after a half-day battle. There's another command from https://github.com/storybookjs/storybook/issues/12408 wrapped up in here, but this is the setup that got me going:

# Create project
npx create-react-app my-project
cd my-project

# Add Storybook:
npx -p @storybook/cli sb init

# Update Storybook
npx sb@next upgrade --prerelease

# Fix babel error
yarn add -D --exact [email protected]

# Start app
yarn start

# Start Storybook
yarn storybook

duplicate to #4764