Create React App CRA - Error: You attempted to import [path/to/app]/node_modules/react/jsx-dev-runtime which falls outside of the project src/ directory

NOTE: Workaround provided by @JMS-1: https://github.com/storybookjs/storybook/issues/13585#issuecomment-757250874. Instructions at the end of this description on implementing the workaround.

Original Bug

Describe the bug A vanilla Create React App install with a vanilla Storybook init fails to run.

To Reproduce Steps to reproduce the behavior:

1. Create a new CRA project: npx create-react-app my-app
2. Change into the directory: cd my-app
3. Initialize Storybook: npx sb init
4. Install babel-loader: yarn add -D babel-loader@8.1.0
5. Start Storybook: yarn storybook
6. Observe the following error in your terminal:

ERROR in ./src/stories/Header.js
Module not found: Error: You attempted to import /repos/my-app/node_modules/react/jsx-dev-runtime which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
 @ ./src/stories/Header.js 4:0-62 5:0-58 16:19-26 17:25-32 19:28-35 20:30-37 25:31-38 28:34-41 35:33-40 42:33-40 59:29-36 70:27-34 71:36-43 79:30-37 79:38-47 80:32-39 88:31-38
 @ ./src/stories/Header.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

Expected behavior Storybook is started

Screenshots

Code snippets Not applicable

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 12.14.0 - ~/.nodenv/versions/12.14.0/bin/node
    Yarn: 1.22.10 - ~/.homebrew/bin/yarn
    npm: 6.13.4 - ~/.nodenv/versions/12.14.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 79.0
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.1.11 => 6.1.11
    @storybook/addon-essentials: ^6.1.11 => 6.1.11
    @storybook/addon-links: ^6.1.11 => 6.1.11
    @storybook/node-logger: ^6.1.11 => 6.1.11
    @storybook/preset-create-react-app: ^3.1.5 => 3.1.5
    @storybook/react: ^6.1.11 => 6.1.11

Additional context

Generated package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.11",
    "babel-loader": "8.1.0"
  }
}

Workaround

Workaround provided by @JMS-1: https://github.com/storybookjs/storybook/issues/13585#issuecomment-757250874

For me seems to be webpack 4.45.0, fixed it for now with resolution in package.json

Steps to resolve:

1. Edit your package.json file, add in the following devDependencies and resolutions:

    "devDependencies": {
        "webpack": "4.44.2"
    },
    "resolutions": {
        "webpack": "4.44.2"
    },

1. Re-install: yarn
2. Start Storybook: yarn storybook

Note that this is a workaround while waiting for a longer-term fix. Don’t keep this in forever!

[JMS-1]

For me seems to be webpack 4.45.0, fixed it for now with with resolution in package.json

    "devDependencies": {
        "webpack": "4.44.2"
    },
    "resolutions": {
        "webpack": "4.44.2"
    },

[TechieQian]

For me seems to be webpack 4.45.0, fixed it for now with with resolution in package.json

    "devDependencies": {
        "webpack": "4.44.2"
    },
    "resolutions": {
        "webpack": "4.44.2"
    },

Yes same! Seems like @storybook/react should have had exact dependencies. In my case incidentally yarn.lock wasnt checked in.

It all adds up.