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 #13585

stabback · 2021-01-08T20:27:32Z

NOTE: Workaround provided by @JMS-1: #13585 (comment). 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:

Create a new CRA project: npx create-react-app my-app
Change into the directory: cd my-app
Initialize Storybook: npx sb init
Install babel-loader: yarn add -D babel-loader@8.1.0
Start Storybook: yarn storybook
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: #13585 (comment)

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

Steps to resolve:

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

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

Re-install: yarn
Start Storybook: yarn storybook

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

The text was updated successfully, but these errors were encountered:

johnrazeur · 2021-01-08T23:32:50Z

I have the same issue with yarn, but it's working with npm.

TechieQian · 2021-01-09T01:17:35Z

I am getting this now too and its failing in our CI, which uses npm. But its actually okay on my local machine using yarn/npm. Rerunning older successful builds from a few days ago also resulting in this failure in build-storybook.

[Step 2/7] <s> [webpack.Progress] 70% building 10/11 modules 1 active /project/node_modules/babel-loader/lib/index.js??ref--7-oneOf-1!/project/node_modules/eslint-loader/dist/cjs.js??ref--6-0!/project/.storybook/generated-stories-entry.js
[21:10:57]	[Step 2/7] ERR! => Failed to build the preview
[21:10:57]	[Step 2/7] ERR! .storybook/preview.js-generated-config-entry.js
[21:10:57]	[Step 2/7] ERR! You attempted to import /project/node_modules/@storybook/client-api which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
[21:10:57]	[Step 2/7] ERR! You can either move it inside src/, or add a symlink to it from project's node_modules/.
[21:10:57]	[Step 2/7] ERR! ModuleNotFoundError: Module not found: Error: You attempted to import /project/node_modules/@storybook/client-api which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
[21:10:57]	[Step 2/7] ERR! You can either move it inside src/, or add a symlink to it from project's node_modules/.
[21:10:57]	[Step 2/7] ERR!     at /project/node_modules/webpack/lib/Compilation.js:925:10

Dependencies:

  "devDependencies": {
    "@babel/core": "7.7.7",
    "@storybook/addon-actions": "6.1.6",
    "@storybook/addon-controls": "^6.1.6",
    "@storybook/addon-docs": "6.1.6",
    "@storybook/addon-knobs": "6.1.6",
    "@storybook/addon-links": "6.1.6",
    "@storybook/cli": "^6.1.6",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "6.1.6",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.6",
    "babel-loader": "8.1.0",
    "copyfiles": "^2.2.0",
    "core-js": "^3.6.5",
    "css-loader": "3.4.0",
    "mini-css-extract-plugin": "^0.9.0",
    "prettier": "^2.0.5",
    "react": "^17.0.1",
    "react-docgen-typescript-webpack-plugin": "^1.1.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "sass": "1.26.3",
    "sass-loader": "8.0.0",
    "style-loader": "^1.1.2",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4"
  },

Quadriphobs1 · 2021-01-09T07:38:07Z

Funny behaviour as to what is causing this, this happens in a newly created project, but doesn't have same behaviour with storyshots and jest.

amirhosseinak20 · 2021-01-09T10:25:50Z

I am facing same issue here.
I use storybook with cra v4 and yarn v2.4

package.json

{
  "name": "temp",
  "description": "temp",
  "author": "temp",
  "version": "0.3.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "craco-less": "^1.17.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.3",
    "workbox-broadcast-update": "^5.1.3",
    "workbox-cacheable-response": "^5.1.3",
    "workbox-core": "^5.1.3",
    "workbox-expiration": "^5.1.3",
    "workbox-google-analytics": "^5.1.3",
    "workbox-navigation-preload": "^5.1.3",
    "workbox-precaching": "^5.1.3",
    "workbox-range-requests": "^5.1.3",
    "workbox-routing": "^5.1.3",
    "workbox-strategies": "^5.1.3",
    "workbox-streams": "^5.1.3"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco 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": {
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-docs": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/addon-storyshots": "^6.1.11",
    "@storybook/addon-storyshots-puppeteer": "^6.1.11",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.11",
    "craco-alias": "^2.1.1",
    "eslint-config-react-app": "^6.0.0",
    "puppeteer": "^5.5.0",
    "react-refresh": "^0.9.0",
    "react-test-renderer": "^17.0.1",
    "supports-color": "^8.1.0"
  },
  "dependenciesMeta": {
    "open@7.3.0": {
      "unplugged": true
    }
  }
}

main.js

const path = require('path');

const root = path.join(__dirname, '..', 'src');
const docPattern = '*.stories.mdx';
const storyPattern = '*.stories.js';
const storybook = 'storybook/**';

module.exports = {
  "stories": [
    path.join(root, storybook, docPattern),
    path.join(root, storybook,storyPattern),
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

preview.js

// assets
import '../src/assets/stylesheet/index.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

.yarnrc.yml

yarnPath: ".yarn/releases/yarn-berry.cjs"

Quadriphobs1 · 2021-01-09T10:26:45Z

If you are not so dependent on CRA you can remove the preset from addons as mentioned here #13583 (comment)

JMS-1 · 2021-01-09T14:34:17Z

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 · 2021-01-09T15:28:33Z

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.

to fix "Create React App CRA - Error: You attempted to import.." error of story book reference: storybookjs/storybook#13585 (comment)

JMS-1 · 2021-01-11T14:45:32Z

Problem is gone with webpack 4.46.0 - no resolutions needed.

shilman · 2021-01-11T19:02:17Z

closing as dupe to #13593

amcsi · 2021-01-12T17:04:45Z

I'm also having this issue, and I'm using CRA v3, and Storybook v5.

Issue solved following storybookjs/storybook#13585 (comment)

yuizho added a commit to yuizho/chambre that referenced this issue Jan 9, 2021

modify package.json to fix weback version

711af94

to fix "Create React App CRA - Error: You attempted to import.." error of story book reference: storybookjs/storybook#13585 (comment)

se7entyse7en mentioned this issue Jan 9, 2021

Can't get emotion's css prop working inside storybook #7540

Closed

shilman mentioned this issue Jan 11, 2021

npx sb init does not work with CRA #13593

Closed

sokra mentioned this issue Jan 11, 2021

enable backward-compatible behavior for resolve.roots webpack/webpack#12387

Merged

shilman closed this as completed Jan 11, 2021

shilman added bug cra Prioritize create-react-app compatibility duplicate labels Jan 11, 2021

z3phyro added a commit to DSpotDevelopers/makerdao-psm that referenced this issue Jan 13, 2021

Fixed storybook create-react-app integration

cb504d8

Issue solved following storybookjs/storybook#13585 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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 #13585

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 #13585

stabback commented Jan 8, 2021 •

edited

johnrazeur commented Jan 8, 2021

TechieQian commented Jan 9, 2021 •

edited

Quadriphobs1 commented Jan 9, 2021

amirhosseinak20 commented Jan 9, 2021 •

edited

Quadriphobs1 commented Jan 9, 2021

JMS-1 commented Jan 9, 2021

TechieQian commented Jan 9, 2021

JMS-1 commented Jan 11, 2021

shilman commented Jan 11, 2021

amcsi commented Jan 12, 2021

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 #13585

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 #13585

Comments

stabback commented Jan 8, 2021 • edited

Original Bug

Workaround

johnrazeur commented Jan 8, 2021

TechieQian commented Jan 9, 2021 • edited

Quadriphobs1 commented Jan 9, 2021

amirhosseinak20 commented Jan 9, 2021 • edited

Quadriphobs1 commented Jan 9, 2021

JMS-1 commented Jan 9, 2021

TechieQian commented Jan 9, 2021

JMS-1 commented Jan 11, 2021

shilman commented Jan 11, 2021

amcsi commented Jan 12, 2021

stabback commented Jan 8, 2021 •

edited

TechieQian commented Jan 9, 2021 •

edited

amirhosseinak20 commented Jan 9, 2021 •

edited