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
Comments
We're seeing the same trying to upgrade the following:
|
This is caused by babel/babel#14273 (comment), which is now fixed in v7.17.4 |
Yep, just created a Next app and installed Storybook and it works, thanks ! |
For those who are still getting blocked by this error after re-install dependencies, don't forget to delete your |
@ALexander4295502 I am having the same issue. 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"
]
}
} |
I had the same problem and more(my case is using nextjs tailwindcss) |
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
npx create-next-app my-app --ts
npx sb init --builder webpack5
npm install --save-dev webpack
npm install storybook-addon-next
npm run storybook
Here is the output:
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 !
The text was updated successfully, but these errors were encountered: