search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.49k stars 9.29k forks source link

Can't run Storybook on a newly created Next app #17510

Closed benjaminbenais closed 2 years ago

benjaminbenais commented 2 years ago

Describe the bug

I've just created a Next.js app, installed Storybook, Storybook Next Addon, and Webpack. I have the following error when I run storybook localy:

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js): RangeError: /Users/name/Dev/Experimentations/storybook-test/node_modules/acorn-jsx/index.js: Maximum call stack size exceeded

Full error below 👇

To Reproduce

  1. Create a Next.js app with: npx create-next-app my-app --ts
  2. Install Storybook: npx sb init --builder webpack5
  3. Install Webpack (otherwise it fails): npm install --save-dev webpack
  4. Install Next addon: npm install storybook-addon-next
  5. run npm run storybook

Here is the output:

> start-storybook -p 6006

info @storybook/react v6.4.19
info 
info => Loading presets
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
95% emitting emitassets by chunk 5.3 MiB (id hint: vendors)
  assets by status 4.91 MiB [big]
    asset vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-49c508.manager.bundle.js 4.55 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_OverlayScrollbars_js.manager.bundle.js 372 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 195 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 115 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_controls_Color_js.manager.bundle.js 71 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_GlobalScrollAreaStyles_js.manager.bundle.js 15.7 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.1 KiB [emitted] (name: runtime~main)
asset index.html 3.77 KiB [emitted]
asset main.manager.bundle.js 1.69 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.28 KiB [emitted]
Entrypoint main [big] 4.57 MiB = runtime~main.manager.bundle.js 14.1 KiB vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-49c508.manager.bundle.js 4.55 MiB main.manager.bundle.js 1.69 KiB
orphan modules 1.56 MiB [orphan] 332 modules
runtime modules 8.69 KiB 14 modules
javascript modules 4.67 MiB 964 modules
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.69.0) compiled successfully in 29289 ms
99% done plugins webpack-hot-middlewarewebpack built preview 1a6951736b8720be49e6 in 30367ms
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
RangeError: /Users/name/Dev/Experimentations/storybook-test/node_modules/acorn-jsx/index.js: Maximum call stack size exceeded
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:211:25
    at Array.map (<anonymous>)
    at build (/Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at processResult (/Users/name/Dev/Experimentations/storybook-test/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:753:19)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:855:5
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/name/Dev/Experimentations/storybook-test/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/name/Dev/Experimentations/storybook-test/node_modules/babel-loader/lib/index.js:59:103

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! storybook-test@ storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the storybook-test@ storybook 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!     /Users/name/.npm/_logs/2022-02-15T17_11_13_669Z-debug.log

System

System: OS: macOS 12.2 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Binaries: Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node npm: 6.14.15 - ~/.nvm/versions/node/v14.18.3/bin/npm Browsers: Chrome: 98.0.4758.80 Firefox: 91.0.1 Safari: 15.3 npmPackages: @storybook/addon-actions: ^6.4.19 => 6.4.19 @storybook/addon-essentials: ^6.4.19 => 6.4.19 @storybook/addon-interactions: ^6.4.19 => 6.4.19 @storybook/addon-links: ^6.4.19 => 6.4.19 @storybook/builder-webpack5: ^6.4.19 => 6.4.19 @storybook/manager-webpack5: ^6.4.19 => 6.4.19 @storybook/react: ^6.4.19 => 6.4.19 @storybook/testing-library: 0.0.9 => 0.0.9

Additional context

I didn't event touch the code of the newly created Next app. Am I missing something or is there a problem with Storybook ? Thanks for the help !

Keysox commented 2 years ago

We're seeing the same trying to upgrade the following:

@babel/cli 7.17.0 -> 7.17.3
@babel/core 7.17.2 -> 7.17.3
@babel/plugin-transform-react-jsx 7.16.7 -> 7.17.3
Keysox commented 2 years ago

https://github.com/babel/babel/issues/14272

jridgewell commented 2 years ago

This is caused by https://github.com/babel/babel/issues/14273#issuecomment-1040869361, which is now fixed in v7.17.4

benjaminbenais commented 2 years ago

Yep, just created a Next app and installed Storybook and it works, thanks !

zh3ngyuan commented 2 years ago

For those who are still getting blocked by this error after re-install dependencies, don't forget to delete your yarn.lock/package-lock.json

eladgoeuro commented 2 years ago

@ALexander4295502 I am having the same issue. I updated bubble core to "@babel/core": "^7.17.5", and also deleted node_modules, yarn.lock and run clean cache, but I'm still getting the Maximum call stack size exceeded exception.

my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "start:dev": "REACT_DEBUGGER=\"unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19000' ||\" expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "storybook": "start-storybook -p 7007",
    "build-storybook": "build-storybook",
    "test": "JEST=true ./node_modules/.bin/jest"
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true
    }
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/datetimepicker": "4.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "7.1.3",
    "@react-navigation/drawer": "^5.10.0",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.10.0",
    "@reduxjs/toolkit": "^1.5.0",
    "@sentry/react-native": "^3.2.13",
    "@use-expo/permissions": "^2.0.0",
    "amazon-cognito-identity-js": "^5.2.4",
    "aws-amplify": "^4.3.13",
    "aws-amplify-react-native": "^4.2.5",
    "aws-sdk": "^2.1066.0",
    "base64-arraybuffer": "^0.2.0",
    "colord": "^2.7.0",
    "eas": "^0.1.0",
    "expo": "^44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-application": "~4.0.1",
    "expo-av": "~10.2.0",
    "expo-camera": "~12.1.2",
    "expo-checkbox": "~2.0.0",
    "expo-constants": "~13.0.1",
    "expo-device": "~4.1.0",
    "expo-facebook": "~12.1.0",
    "expo-font": "~10.0.4",
    "expo-gl": "~11.1.1",
    "expo-image-editor": "^1.7.1",
    "expo-image-manipulator": "~10.2.0",
    "expo-image-picker": "~12.0.1",
    "expo-intent-launcher": "~10.1.0",
    "expo-keep-awake": "~10.0.1",
    "expo-linear-gradient": "~11.0.3",
    "expo-linking": "~3.0.0",
    "expo-localization": "~12.0.0",
    "expo-location": "~14.0.1",
    "expo-navigation-bar": "~1.1.1",
    "expo-notifications": "~0.14.0",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "expo-updates": "~0.11.6",
    "expo-web-browser": "~10.1.0",
    "form-data": "^3.0.0",
    "i18n-js": "^3.8.0",
    "jest-svg-transformer": "^1.0.0",
    "libphonenumber-js": "^1.9.9",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "password-validator": "^5.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-anchor-point": "^1.0.5",
    "react-native-animatable": "^1.3.3",
    "react-native-animated-circular-progress": "^1.0.6",
    "react-native-appearance": "~0.3.3",
    "react-native-canvas": "^0.1.37",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-draggable": "^3.3.0",
    "react-native-elements": "^2.3.2",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-image-progress": "^1.1.1",
    "react-native-image-resizer": "^1.4.4",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-location-enabler": "^4.1.0",
    "react-native-maps": "0.29.4",
    "react-native-mime-types": "^2.3.0",
    "react-native-modal-datetime-picker": "^13.0.1",
    "react-native-paper": "^4.1.0",
    "react-native-phone-input": "^0.2.4",
    "react-native-progress": "^4.1.2",
    "react-native-progress-circle": "^2.1.0",
    "react-native-progress-wheel": "^1.0.5",
    "react-native-range-slider-expo": "^1.4.1",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-svg": "12.1.1",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-web": "0.17.1",
    "react-native-webview": "11.15.0",
    "react-navigation-header-buttons": "^5.0.2",
    "react-promise-tracker": "^2.1.0",
    "react-redux": "^7.2.1",
    "recoil": "^0.6.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "save": "^2.4.0",
    "secret": "^1.2.0",
    "sentry-expo": "^4.0.0",
    "styled-components": "^5.2.0",
    "use-sound": "^4.0.0",
    "validator": "^13.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-typescript": "^7.16.7",
    "@storybook/addon-actions": "^5.3",
    "@storybook/addon-knobs": "^5.3",
    "@storybook/addon-links": "^5.3",
    "@storybook/addon-ondevice-actions": "^5.3.23",
    "@storybook/addon-ondevice-knobs": "^5.3.25",
    "@storybook/react-native": "^5.3.25",
    "@storybook/react-native-server": "^5.3.23",
    "babel-loader": "^8.2.2",
    "babel-preset-expo": "9.0.2",
    "eslint": "^7.22.0",
    "eslint-plugin-jest": "^24.3.2",
    "eslint-plugin-react": "^7.21.5",
    "jest-expo": "^44.0.0"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.svg$": "jest-svg-transformer"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|styled-components|@sentry/.*)"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/__mocks__/globalMock.js"
    ],
    "collectCoverage": false,
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/coverage/**",
      "!**/node_modules/**",
      "!**/babel.config.js",
      "!**/jest.setup.js"
    ]
  }
}
MarinosTBH commented 1 year ago

I had the same problem and more(my case is using nextjs tailwindcss) So i did : npm i -D @storybook/addon-styling npm i acorn acorn-jsx import the global.css file of your tailwind config in .storybook/preview.js => import "../assets/styles/globals.css" Restart storybook