Closed benjaminbenais closed 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
This is caused by https://github.com/babel/babel/issues/14273#issuecomment-1040869361, 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 yarn.lock
/package-lock.json
@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"
]
}
}
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
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 !