Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Can't run Storybook on a newly created Next app
See original GitHub issueDescribe 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
- Create a Next.js app with:
npx create-next-app my-app --ts - Install Storybook:
npx sb init --builder webpack5 - Install Webpack (otherwise it fails):
npm install --save-dev webpack - Install Next addon:
npm install storybook-addon-next - 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® Core™ 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 !
Issue Analytics
- State:
- Created 2 years ago
- Reactions:11
- Comments:6
Top Results From Across the Web
Get started with Storybook and Next.js
This tutorial uses the fantastic Getting Started guide on nextjs.org. Screenshot of a browser showing a new Next.js app running at localhost: ...
Read more >Storybook error when using Webpack5 with Next.JS app + ...
npx create-next-app@latest --typescript · cd my-app · npx sb init · n for eslint-plugin-storybook plugin fix · yarn add @storybook/builder-webpack5 ...
Read more >Storybook + Next + Netlify - Support
I had the same problem. I had a storybook deploy that was working with a create-react-app, but when I switched the repo to...
Read more >How to Set Up Storybook for a Next.js Project - MakeUseOf
It helps you create and test components without running the whole application. If you've ever used Storybook with Next.js, you'll notice you ...
Read more >Le's see how to use Storybook in Next.js based on TypeScript ...
js project based on TypeScript , execute the following command to create a new Next.js project with TypeScript . npx create-next-app -- ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is caused by https://github.com/babel/babel/issues/14273#issuecomment-1040869361, which is now fixed in v7.17.4
@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 exceededexception.my package.json: