search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.46k stars 9.28k forks source link

[Bug]: [7.0.0-beta.19]: using pnpm with nextjs, module not found: Error: Can't resolve 'style-loader' #20468

Closed ArianHamdi closed 1 year ago

ArianHamdi commented 1 year ago

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

binaryartifex commented 1 year ago

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

amery commented 1 year ago

could --shamefully-hoist solve this?

IanVS commented 1 year ago

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.

ndelangen commented 1 year ago

@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.

rhuanbello commented 1 year ago

Fixed by running pnpm -D css-loader style-loader postcss-loader

yannbf commented 1 year ago

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+

Seefer commented 1 year ago

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.

valentinpalkovic commented 1 year ago

The issue was resolved with https://github.com/storybookjs/storybook/pull/21834

dep commented 1 year ago

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!

IanVS commented 1 year ago

@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.

dep commented 1 year ago

Adding a framework got me past the error, thanks @IanVS !

dep commented 1 year ago

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,
  },
};
dep commented 1 year ago

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)
dep commented 1 year ago

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.
IanVS commented 1 year ago

@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.

Demi1024 commented 1 year ago

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!

same problem, can anyone help?