storybook
storybook copied to clipboard
Published
20 hours ago •
storybookjs
storybookjs
[Bug]: [7.0.0-beta.19]: using pnpm with nextjs, module not found: Error: Can't resolve 'style-loader'
Describe the bug
Running storybook by pnpm in a nextjs app throws the error "can't resolve 'style-loader'".
To Reproduce
1. pnpm create next-app storybook.
2. cd ./storybook.
3. pnpm dlx storybook@next init --package-manager=pnpm.
4. pnpm run storybook.
The following error is thrown :
Module not found: Error: Can't resolve 'style-loader.
P.S : Works fine by yarn & npm.
System
System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 16.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
pnpm: 7.21.0
Browsers:
Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.54)
npmPackages:
@storybook/addon-essentials: 7.0.0-beta.19 => 7.0.0-beta.19
@storybook/addon-interactions: 7.0.0-beta.19 => 7.0.0-beta.19
@storybook/addon-links: 7.0.0-beta.19 => 7.0.0-beta.19
@storybook/blocks: 7.0.0-beta.19 => 7.0.0-beta.19
@storybook/nextjs: 7.0.0-beta.19 => 7.0.0-beta.19
@storybook/react: 7.0.0-beta.19 => 7.0.0-beta.19
@storybook/testing-library: 0.0.13 => 0.0.13
Additional context
No response
can confirm. similar setup (windows 11, using pnpm, same dependencies....). i have to install css-loader and style-loader manually otherwise either the .css file imported into preview.ts errors or I get the "can't find x-loader" errors as above
could --shamefully-hoist solve this?
It's possible, but our goal is to avoid requiring that. We've done a lot of work already to clean things up so that we don't rely on hoisting, looks like we just have a bit more to do here for next.js.
@valentinpalkovic I see you're requested to work on this..
I just skimmed this after a week of vacation, so take my take on this with a gram of salt, but we should likely add a regular dependency on the style-loader somewhere, and possibly, wrap the reference to it with require.resolve. I'm not sure that second part is truly necessary.
FYI this is a current limitation that is documented in the README of the @storybook/nextjs package:
https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#notes-for-yarn-v2-and-v3-users
Just seems to not be related only to yarn2+
I was running into that issue but since upgrading pnpm to version 8.1.1 and running pnpm dlx sb@next init that installs Storybook version 7.1.0-alpha.0, it seems to install and work fine without needing to manually add more dependencies on my Windows 11 system with node version 18.15.0.
The issue was resolved with https://github.com/storybookjs/storybook/pull/21834
I'm having the same problem in my repo:
"@storybook/addon-actions": "7.0.7",
"@storybook/addon-docs": "7.0.7",
"@storybook/addon-knobs": "7.0.0",
"@storybook/addon-links": "7.0.7",
"@storybook/addons": "7.0.6",
"@storybook/preset-scss": "1.0.3",
"@storybook/react": "7.0.7",
"@storybook/theming": "7.0.7",
Error:
@foo/box-signals: Module not found: Error: Can't resolve 'style-loader' in '/Users/baz/foo/box/applications/react/modern/signals'
@foo/box-signals: @ ./src/components/BulkActionsSelect.jsx 4:0-48 53:88-103
@foo/box-signals: @ ./src/components/FilterSignalsPanel.jsx 7:0-52 57:53-70
@foo/box-signals: @ ./src/components/Signals.jsx 6:0-54 122:39-57
@foo/box-signals: @ ./src/components/App.jsx 6:0-32 35:38-45
@foo/box-signals: @ ./src/index.jsx 8:0-35 48:36-39
@foo/box-signals: ERROR in ./src/components/SplashSelector.jsx 5:0-39
Any help is appreciated!
@dep it looks like you do not have a Storybook framework package, and your version of @storybook/addons is a little behind the others, which can sometimes cause trouble. And if you're using nextjs, and use @storybook/nextjs, I think you can remove @storybook/preset-scss, as SCSS should be supported out of the box.
The last error I'm stuck on is:
info => Cleaning outputDir: /storybook-static/src
ERR! TypeError: Cannot read properties of undefined (reading 'startsWith')
ERR! at /home/runner/work/Box/Box/node_modules/@storybook/core-server/dist/index.js:17:8431
ERR! at Array.map (<anonymous>)
ERR! at getAddonNames (/home/runner/work/Box/Box/node_modules/@storybook/core-server/dist/index.js:[17](https://github.com/Foo/Box/actions/runs/4799309432/jobs/8538766537?pr=1266#step:10:18):8322)
ERR! at getIncompatibleAddons (/home/runner/work/Box/Box/node_modules/@storybook/core-server/dist/index.js:17:9576)
ERR! at warnOnIncompatibleAddons (/home/runner/work/Box/Box/node_modules/@storybook/core-server/dist/index.js:17:10176)
ERR! at buildStaticStandalone (/home/runner/work/Box/Box/node_modules/@storybook/core-server/dist/index.js:25:1228)
ERR! at async withTelemetry (/home/runner/work/Box/Box/node_modules/@storybook/core-server/dist/index.js:35:34[22](https://github.com/Foo/Box/actions/runs/4799309432/jobs/8538766537?pr=1266#step:10:23))
ERR! at async build (/home/runner/work/Box/Box/node_modules/@storybook/cli/dist/generate.js:434:1058)
ERR! at async Command.<anonymous> (/home/runner/work/Box/Box/node_modules/@storybook/cli/dist/generate.js:437:125)
ERR! TypeError: Cannot read properties of undefined (reading 'startsWith')
Here's my package.json in case something jumps out:
"dependencies": {
"@apollo/react-hooks": "^3.1.0",
"@babel/core": "7.21.4",
"@material-ui/core": "4.12.4",
"@nivo/core": "0.62.0",
"apollo-boost": "^0.4.4",
"bootstrap": "4.3.1",
"cheerio": "1.0.0-rc.10",
"d3-geo": "^2.0.1",
"dayjs": "1.9.8",
"emoji-mart": "3.0.1",
"emoji-toolkit": "6.0.1",
"fuzzysort": "1.1.4",
"highlight-words-core": "1.2.2",
"history": "4.0.0",
"immutable": "3.8.2",
"imports-loader": "^0.8.0",
"jquery-deparam": "0.4.2",
"jquery-textfill": "^0.6.0",
"moment": "^2.9.0",
"moment-timezone": "0.5.43",
"prop-types": "15.8.1",
"rc-slider": "9.6.5",
"react-beforeunload": "2.5.3",
"react-bootstrap": "1.6.4",
"react-dates": "^21.5.1",
"react-dropzone": "10.2.2",
"react-grid-layout": "1.3.4",
"react-linkify": "1.0.0-alpha",
"react-mentions": "4.0.2",
"react-moment": "1.1.3",
"react-moment-proptypes": "1.8.1",
"react-resizable": "1.11.1",
"react-resize-detector": "9.1.0",
"react-simple-maps": "2.3.0",
"react-toast-notifications": "2.5.1",
"reactstrap": "8.10.1",
"recharts": "1.8.6",
"resize-observer-polyfill": "1.5.1",
"traverse": "0.6.7"
},
"devDependencies": {
"@apollo/react-testing": "^3.1.2",
"@babel/core": "7.21.4",
"@babel/helper-validator-identifier": "7.16.7",
"@babel/plugin-proposal-class-properties": "7.x",
"@babel/plugin-proposal-object-rest-spread": "7.x",
"@babel/plugin-transform-runtime": "7.x",
"@babel/preset-env": "7.21.4",
"@babel/preset-react": "7.18.6",
"@honeybadger-io/js": "5.3.0",
"@foo/eslint-config-titan": "3.0.13",
"@foo/shared-dev-dependencies-titan": "0.0.2",
"@foo/webpack-config-titan": "2.2.29",
"@nivo/bar": "^0.62.0",
"@rails/webpacker": "5.4.4",
"@storybook/addon-actions": "7.0.7",
"@storybook/addon-controls": "7.0.7",
"@storybook/addon-docs": "7.0.7",
"@storybook/addon-knobs": "7.0.0",
"@storybook/addon-links": "7.0.7",
"@storybook/addons": "7.0.7",
"@storybook/react": "7.0.7",
"@storybook/react-webpack5": "7.0.7",
"@storybook/theming": "7.0.7",
"@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
"babel-jest": "^24.7.1",
"babel-plugin-require-context-hook": "^1.0.0",
"backbone": "1.1.2",
"backdraft-app": "1.3.3",
"bootstrap-switch": "3.3.4",
"classnames": "^2.2.6",
"css-loader": "5.1.1",
"dateformat": "1.0.12",
"deepdash": "^5.3.7",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "^1.7.1",
"formik": "^1.5.8",
"jasmine-ajax": "4.0.0",
"jasmine-core": "~2.4.0",
"jasmine-enzyme": "^6.0.3",
"jest": "^24.7.1",
"jest-canvas-mock": "^2.3.1",
"jest-environment-enzyme": "^7.0.2",
"jest-environment-jsdom": "^24.7.1",
"jest-prop-type-error": "^1.1.0",
"jquery": "1.12.4",
"karma": "^4.3.0",
"karma-chrome-launcher": "^3.1.0",
"karma-jasmine": "^1.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "3.0.0",
"lodash": "4.17.21",
"memoize-one": "5.1.1",
"popper.js": "1.15.0",
"promise-mock": "2.1.0",
"puppeteer": "^1.15.0",
"qs": "6.7.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-js-pagination": "3.0.3",
"react-minimal-pie-chart": "5.0.2",
"react-router-dom": "5.3.0",
"react-select": "4.3.1",
"react-spring": "9.4.4",
"regenerator-runtime": "0.13.11",
"sass": "1.55.0",
"sass-loader": "10.2.0",
"select2": "4.0.5",
"sinon": "15.0.4",
"source-map-loader": "^0.2.3",
"style-loader": "2.0.0",
"traverse": "0.6.7",
"underscore": "1.12.1",
"underscore-template-loader": "1.2.0",
"webpack": "4.x",
"webpack-cli": "4.10.0",
"yup": "0.32.11"
},
"peerDependencies": {
"@apollo/react-hooks": "^3.1.0",
"@honeybadger-io/js": "5.3.0",
"backbone": "1.1.2",
"backdraft-app": "1.3.3",
"bootstrap": "4.3.1",
"bootstrap-switch": "3.3.4",
"classnames": "^2.2.6",
"dateformat": "1.0.12",
"deepdash": "^5.3.7",
"formik": "^1.5.8",
"jest-environment-jsdom": "27.5.1",
"jquery-deparam": "0.4.2",
"lodash": "4.17.21",
"memoize-one": "5.1.1",
"popper.js": "1.15.0",
"promise-mock": "2.1.0",
"qs": "6.7.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-js-pagination": "3.0.3",
"react-minimal-pie-chart": "5.0.2",
"react-resize-detector": "9.1.0",
"react-router-dom": "5.3.0",
"react-select": "4.3.1",
"react-spring": "9.4.4",
"reactstrap": "8.10.1",
"select2": "4.0.5",
"traverse": "0.6.7",
"underscore": "1.12.1",
"underscore-template-loader": "1.2.0",
"yup": "0.32.11"
},
"engines": {
"node": "^16.16.0"
}
And my main.js
module.exports = {
addons: [
"@storybook/addon-docs",
"@storybook/addon-knobs",
require("@foo/webpack-config-titan/src/webpack.sass.storybook.main"),
],
stories: ["../src/**/*.stories.{mdx,js}"],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
features: {
buildStoriesJson: true,
storyStoreV7: true,
},
};
I was able to bypass that error by removing this addon
require("@foo/webpack-config-titan/src/webpack.sass.storybook.main"),
But I have one more:
R! /home/runner/work/Box/Box/node_modules/fork-ts-checker-webpack-plugin/lib/issue/issue-webpack-error.js:13
ERR! class IssueWebpackError extends webpack_1.default.WebpackError {
ERR! ^
ERR!
ERR! TypeError: Class extends value undefined is not a constructor or null
ERR! at Object.<anonymous> (/home/runner/work/Box/Box/node_modules/fork-ts-checker-webpack-plugin/lib/issue/issue-webpack-error.js:13:51)
ERR! at Module._compile (node:internal/modules/cjs/loader:1105:14)
ERR! at Module._compile (/home/runner/work/Box/Box/node_modules/esbuild-register/dist/node.js:2258:26)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
ERR! at Object.newLoader (/home/runner/work/Box/Box/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Object.extensions..js (/home/runner/work/Box/Box/node_modules/esbuild-register/dist/node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
ERR! /home/runner/work/Box/Box/node_modules/fork-ts-checker-webpack-plugin/lib/issue/issue-webpack-error.js:13
ERR! class IssueWebpackError extends webpack_1.default.WebpackError {
ERR! ^
ERR!
ERR! TypeError: Class extends value undefined is not a constructor or null
ERR! at Object.<anonymous> (/home/runner/work/Box/Box/node_modules/fork-ts-checker-webpack-plugin/lib/issue/issue-webpack-error.js:13:51)
ERR! at Module._compile (node:internal/modules/cjs/loader:1105:14)
ERR! at Module._compile (/home/runner/work/Box/Box/node_modules/esbuild-register/dist/node.js:2258:26)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
ERR! at Object.newLoader (/home/runner/work/Box/Box/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Object.extensions..js (/home/runner/work/Box/Box/node_modules/esbuild-register/dist/node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
Resolved that error, now have this one:
@foo/box-legacy-web: /Users/bar/foo/box/node_modules/webpack/lib/NormalModule.js:761
@foo/box-legacy-web: const error = new ModuleBuildError(err, {
@foo/box-legacy-web: ^
@foo/box-legacy-web: ModuleBuildError: Module build failed (from ../../node_modules/@storybook/mdx2-csf/loader.js):
@foo/box-legacy-web: Unexpected `VariableDeclaration` in code: only import/exports are supported
@foo/box-legacy-web: at null.processResult (/Users/bar/foo/box/node_modules/webpack/lib/NormalModule.js:761:19)
@foo/box-legacy-web: at null.<anonymous> (/Users/bar/foo/box/node_modules/webpack/lib/NormalModule.js:863:5)
@foo/box-legacy-web: at null.<anonymous> (/Users/bar/foo/box/node_modules/loader-runner/lib/LoaderRunner.js:400:11)
@foo/box-legacy-web: at null.<anonymous> (/Users/bar/foo/box/node_modules/loader-runner/lib/LoaderRunner.js:252:18)
@foo/box-legacy-web: at null.context.callback (/Users/bar/foo/box/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
@foo/box-legacy-web: at Object.loader (/Users/bar/foo/box/node_modules/@storybook/mdx2-csf/loader.js:32:12)
@foo/box-legacy-web: /Users/bar/foo/box/node_modules/webpack/lib/NormalModule.js:761
@foo/box-legacy-web: const error = new ModuleBuildError(err, {
@foo/box-legacy-web: ^
@foo/box-legacy-web: ModuleBuildError: Module build failed (from ../../node_modules/@storybook/mdx2-csf/loader.js):
@foo/box-legacy-web: Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)
@foo/box-legacy-web: at null.processResult (/Users/bar/foo/box/node_modules/webpack/lib/NormalModule.js:761:19)
@foo/box-legacy-web: at null.<anonymous> (/Users/bar/foo/box/node_modules/webpack/lib/NormalModule.js:863:5)
@foo/box-legacy-web: at null.<anonymous> (/Users/bar/foo/box/node_modules/loader-runner/lib/LoaderRunner.js:400:11)
@foo/box-legacy-web: at null.<anonymous> (/Users/bar/foo/box/node_modules/loader-runner/lib/LoaderRunner.js:252:18)
@foo/box-legacy-web: at null.context.callback (/Users/bar/foo/box/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
@foo/box-legacy-web: at Object.loader (/Users/bar/foo/box/node_modules/@storybook/mdx2-csf/loader.js:32:12)
@foo/box-legacy-web: WARN Broken build, fix the error above.
@foo/box-legacy-web: WARN You may need to refresh the browser.
@dep I'd suggest opening a new issue, or hopping into the discord (discord.gg/storybook) to get help with this further, since it's no longer related to this issue.
I'm having the same problem in my repo:
"@storybook/addon-actions": "7.0.7", "@storybook/addon-docs": "7.0.7", "@storybook/addon-knobs": "7.0.0", "@storybook/addon-links": "7.0.7", "@storybook/addons": "7.0.6", "@storybook/preset-scss": "1.0.3", "@storybook/react": "7.0.7", "@storybook/theming": "7.0.7",Error:
@foo/box-signals: Module not found: Error: Can't resolve 'style-loader' in '/Users/baz/foo/box/applications/react/modern/signals' @foo/box-signals: @ ./src/components/BulkActionsSelect.jsx 4:0-48 53:88-103 @foo/box-signals: @ ./src/components/FilterSignalsPanel.jsx 7:0-52 57:53-70 @foo/box-signals: @ ./src/components/Signals.jsx 6:0-54 122:39-57 @foo/box-signals: @ ./src/components/App.jsx 6:0-32 35:38-45 @foo/box-signals: @ ./src/index.jsx 8:0-35 48:36-39 @foo/box-signals: ERROR in ./src/components/SplashSelector.jsx 5:0-39Any help is appreciated!
same problem, can anyone help?
