I got TypeError trying to install Storybook in my Next.js app.
I got the Error:
`An error occurred while installing dependencies: wnt.default is not a function
Error: TypeError: wnt.default is not a function`
My package.json
{
"name": "my-app",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint --ext .ts,.tsx ./src --no-error-on-unmatched-pattern",
"lint:fix": "eslint --ext .ts,.tsx ./src --no-error-on-unmatched-pattern --fix",
"prettier": "prettier \"**/*.+(json|ts|tsx)\"",
"format:check": "npm run prettier -- --check",
"format:fix": "npm run prettier -- --write",
"types:check": "tsc --noEmit --pretty",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"storybook:build": "build-storybook",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"cypress": "cypress open",
"cypress:headless": "cypress run",
"e2e": "start-server-and-test start http://localhost:3000 cypress",
"e2e:headless": "start-server-and-test start http://localhost:3000 cypress:headless",
"stage:switch": "node scripts/switch-stage.js",
"stage:save": "node scripts/save-stage.js",
"stage:clear": "node scripts/clear-stage.js"
},
"dependencies": {
"@chakra-ui/icons": "^2.0.9",
"@chakra-ui/react": "^2.3.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@tanstack/react-query": "^4.2.3",
"@tanstack/react-query-devtools": "^4.2.3",
"axios": "^0.27.2",
"framer-motion": "^7.2.1",
"next": "^12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-error-boundary": "^3.1.4",
"react-hook-form": "^7.34.2",
"zustand": "^4.1.1"
},
"devDependencies": {
"@mswjs/data": "^0.10.2",
"@testing-library/cypress": "^8.0.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@types/node": "18.7.14",
"@types/react": "18.0.18",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"babel-loader": "^8.2.5",
"cypress": "^10.7.0",
"eslint": "8.23.0",
"eslint-config-next": "12.2.5",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-storybook": "^0.6.4",
"fs-extra": "^10.1.0",
"husky": "^8.0.1",
"inquirer": "^8.2.4",
"jest": "^29.0.2",
"jest-environment-jsdom": "^29.0.2",
"lint-staged": "^13.0.3",
"msw": "^0.47.4",
"msw-devtools": "^1.0.2",
"prettier": "^2.7.1",
"start-server-and-test": "^1.14.0",
"ts-eager": "^2.0.2",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "4.8.2",
"webpack": "^5.74.0"
},
"msw": {
"workerDirectory": "public"
}
}
I tried to install the latest Storybook into existing project:
npx storybook@latest init
Result: Error: TypeError: wnt.default is not a function`
Expected result: Storybook succesfully installed.
I fixed it by bumping up the version of storybook-addon.
// package.json:
...
"@chakra-ui/storybook-addon": "^5.1.0",
...