Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
benjaminbenais opened this issue Feb 15, 2022 · 7 comments
Closed

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

benjaminbenais opened this issue Feb 15, 2022 · 7 comments

Comments

@benjaminbenais
Copy link

benjaminbenais commented Feb 15, 2022

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
Copy link

Keysox commented Feb 15, 2022

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
Copy link

Keysox commented Feb 15, 2022

babel/babel#14272

@jridgewell
Copy link

This is caused by babel/babel#14273 (comment), which is now fixed in v7.17.4

@benjaminbenais
Copy link
Author

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

@zh3ngyuan
Copy link

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
Copy link

eladgoeuro commented Feb 20, 2022

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants