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.21k stars 9.26k forks source link

Webpack v5 Upgrade - `start-storybook` works but `build-storybook` fails #13893

Open lanesawyer opened 3 years ago

lanesawyer commented 3 years ago

Describe the bug I recently upgrade my project to Webpack v5. The start-storybook command works just fine, but when I run build-storybook, I get the following error:

info @storybook/react v6.1.11
info
info => Cleaning outputDir C:\Dev\bkp-client\storybook-static
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Loading custom babel config
info => Compiling manager..
C:\Dev\bkp-client\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119
                        throw new TypeError(
                        ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (C:\Dev\bkp-client\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\Dev\bkp-client\node_modules\terser-webpack-plugin\dist\index.js:571:67
    at SyncHook.eval [as call] (eval at create (C:\Dev\bkp-client\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:87:1)
    at SyncHook.lazyCompileHook (C:\Dev\bkp-client\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Dev\bkp-client\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Dev\bkp-client\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:662:28)
    at C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:321:11
    at Array.<anonymous> (C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:534:20)
    at Storage.finished (C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at callback (C:\Dev\bkp-client\node_modules\graceful-fs\polyfills.js:295:20)
    at FSReqCallback.oncomplete (fs.js:183:21)
npm ERR! code 1

I saw a similar error with the html-webpack-plugin, so it may just be that Storybook 6 is incompatable with Webpack 5, but it's strange that start-storybook works while build-storybook fails.

To Reproduce Use Storybook with Webpack v5.

Expected behavior I would expect that a working start-storybook implies that build-storybook works as well. It's a bit confusing to have my normal Storybook workflow work perfectly but the build tools are unable to build. How does start-storybook actually work if it's not building the Storybook?

System Environment Info:

System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz Binaries: Node: 14.15.1 - C:\Program Files\nodejs\node.EXE npm: 7.5.3 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 88.0.4324.150 Edge: Spartan (44.18362.449.0) npmPackages: @storybook/addon-actions: ^6.1.11 => 6.1.11 @storybook/addon-links: ^6.1.11 => 6.1.11 @storybook/addons: ^6.1.11 => 6.1.11 @storybook/preset-typescript: ^3.0.0 => 3.0.0 @storybook/react: ^6.1.11 => 6.1.11 @storybook/storybook-deployer: ^2.8.7 => 2.8.7

phated commented 3 years ago

Hey @lanesawyer! Storybook doesn't currently support Webpack 5. You can check out the ongoing progress in https://github.com/storybookjs/storybook/pull/13808

I'm going to close this up because the webpack 5 epic is #9216

Hypnosphi commented 3 years ago

I encounter exactly this when trying to follow https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

Reproduction: https://github.com/JetBrains/ring-ui/tree/webpack-5

npm install
npm run bootstrap
npm run build
shilman commented 3 years ago

@Hypnosphi OK I figured it out. The problem is that you're using a custom addon (called a preset in your codebase, but we're calling everything addons now -- the documentation and presets repo haven't caught up yet), and that uses webpack. Since Storybook uses webpack4 to build the manager, and your custom-header uses webpack5, it's causing the crash.

There are also some hoisting-related issues (terser-webpack-plugin and html-webpack-plugin) that can be overcome by installing the right versions at the root of the repo, but the wepback5-based manager issue is a show stopper, potentially solved by https://github.com/storybookjs/storybook/issues/14044

Hypnosphi commented 3 years ago

@shilman I see. I think I'll just extract custom-header into a separate lerna package with its own dependencies

marjisound commented 3 years ago

@lanesawyer Did you manage to solve the issue you had regarding the build-storybook ? I'm having the exact same problem and I tried so many different alpha versions including #14044 but none works

shilman commented 3 years ago

@lanesawyer @marjisound very interested in identifying the failure modes, so if you (or anybody else) is experiencing this issue and have a repro repo I'd be happy to take a look

jessevanassen commented 3 years ago

We are running into this issue in the https://gitlab.com/riovir/vue-app-scaffolding repository which can be used as a reproduction. It currently breaks on the v11.6.0 tag.

Reproduction recipe:

Your prior suggestion to install the terser-webpack-plugin solved the issue for us.

shilman commented 3 years ago

@JessevanAssen thanks for the repro! however, i'm having trouble getting it:

MMBP15:testing shilman$ git clone git@gitlab.com:riovir/vue-app-scaffolding.git --branch v11.6.0
Cloning into 'vue-app-scaffolding'...
git@gitlab.com: Permission denied (publickey,keyboard-interactive).
fatal: Could not read from remote repository.
riovir commented 3 years ago

EDIT: I've added a line to bump Storybook to its latest version. (Original sample was still at BETA 5.)

You may want to use the https format of the repo:

git clone https://gitlab.com/riovir/vue-app-scaffolding.git
cd vue-app-scaffolding
npm install
npm install @storybook/addon-essentials@next @storybook/addons@next @storybook/builder-webpack5@next @storybook/vue@next
npm run storybook:build

Hope it helps!

shilman commented 3 years ago

@riovir thanks for this. i haven't gotten to the bottom of it yet, but my guess is it's a hoisting issue. I reinstalled with yarn just for testing purposes and that works fine. I'll see if I can figure out what's going on with npm.

marjisound commented 3 years ago

@lanesawyer @marjisound very interested in identifying the failure modes, so if you (or anybody else) is experiencing this issue and have a repro repo I'd be happy to take a look

Thanks @shilman We actually managed to fix the TypeError: The 'compilation' argument must be an instance of Compilation issue for build-storybook by tweaking the way terser-webpack-plugin is installed => npm i terser-webpack-plugin && npm remove terser-webpack-plugin

But now we are having a new issue on both build-storybook & start-storybook for ts-loader module build TypeError: Cannot read property 'tap' of undefined for which I created a new issue https://github.com/storybookjs/storybook/issues/14170

martynd commented 3 years ago

The majority of the times that I've had erratic TypeError: The 'compilation' argument must be an instance of Compilation errors, it has been caused by separate installs of webpack 4 getting caught up in imports causing the instanceof tests to go sideways. This would likely fit with people having differing successes when it comes to changing how modules are imported/installed and the inconsistencies in how it manifests.

Some of this might be better in the webpack 5 thread, but ive built both the preview and manager with webpack 5 with relatively few changes (though that use case is limited to the react framework)

One thing I would definitely search for is multiple versions of webpack, webpack-dev-middleware, terser-webpack-plugin and the likes installed in various storybook modules/addons. I think at one point between storybook addons and the base storybook install itself I had 5 extra webpack installs present.

With just a clean install of @storybook/react I end up with webpack installed in @storybook/react/node_modules/webpack and @storybook/core/node_modules/webpack, likewise dev-middleware and a couple of webpack plugins

with addons and so on, you can end up with many more.

If you are running entirely on webpack 5 (as would seem to be the case for you @marjisound), I would suggest identifying locations where things are doubled up or more

For example with find node_modules/@storybook/ | grep terser-webpack-plugin/package.json find node_modules/@storybook/ | grep /webpack/package.json

Any single instance of one of these can trigger errors like you've seen if you're trying to use a webpack5 only build env

As a side note, the packages were populated with yarn

PascalPixel commented 3 years ago

@marjisound's npm i terser-webpack-plugin && npm remove terser-webpack-plugin fixed it for us 👏

daviddelusenet commented 3 years ago

I'm also experiencing this issue unfortunately 😞

daviddelusenet commented 3 years ago

Some additional information from my end, I currently have the following (dev) dependencies:

"dependencies": {
  "html-react-parser": "^1.2.4",
  "react-spring": "^8.0.27",
  "styled-components": "^5.2.3",
  "uuid": "^8.3.2"
},
"devDependencies": {
  "@babel/core": "^7.13.14",
  "@babel/plugin-proposal-class-properties": "^7.13.0",
  "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
  "@babel/preset-env": "^7.13.12",
  "@babel/preset-react": "^7.13.13",
  "@babel/preset-typescript": "^7.13.0",
  "@commitlint/cli": "^12.1.1",
  "@commitlint/config-conventional": "^12.1.1",
  "@iteratec/semantic-release-bitbucket": "^1.1.1",
  "@semantic-release/changelog": "^5.0.1",
  "@semantic-release/commit-analyzer": "^8.0.1",
  "@semantic-release/git": "^9.0.0",
  "@semantic-release/npm": "^7.0.9",
  "@semantic-release/release-notes-generator": "^9.0.2",
  "@storybook/addon-a11y": "^6.2.5",
  "@storybook/addon-actions": "^6.2.5",
  "@storybook/addon-docs": "^6.2.5",
  "@storybook/addon-knobs": "^6.2.5",
  "@storybook/addon-links": "^6.2.5",
  "@storybook/addon-storyshots": "^6.2.5",
  "@storybook/addon-storysource": "^6.2.5",
  "@storybook/addon-viewport": "^6.2.5",
  "@storybook/core": "^6.2.5",
  "@storybook/preset-typescript": "^3.0.0",
  "@storybook/react": "^6.2.5",
  "@storybook/source-loader": "^6.2.5",
  "@types/jest": "^26.0.22",
  "@types/react": "^17.0.3",
  "@types/react-dom": "^17.0.3",
  "@types/react-helmet": "^6.1.0",
  "@types/react-test-renderer": "^17.0.1",
  "@types/styled-components": "^5.1.9",
  "@types/uuid": "^8.3.0",
  "@types/webpack": "^4.41.27",
  "@typescript-eslint/eslint-plugin": "^4.21.0",
  "@typescript-eslint/parser": "^4.21.0",
  "audit-ci": "^3.2.0",
  "babel-jest": "^26.6.3",
  "babel-loader": "^8.2.2",
  "babel-plugin-require-context-hook": "^1.0.0",
  "babel-plugin-styled-components": "^1.12.0",
  "commitizen": "^4.2.3",
  "cz-conventional-changelog": "^3.3.0",
  "eslint": "^7.23.0",
  "eslint-config-prettier": "^8.1.0",
  "eslint-plugin-jest": "^24.3.4",
  "eslint-plugin-prettier": "^3.3.1",
  "eslint-plugin-react": "^7.23.1",
  "eslint-plugin-react-hooks": "^4.2.0",
  "husky": "^4.3.8",
  "jest": "^26.6.3",
  "jest-styled-components": "^7.0.3",
  "prettier": "^2.2.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-is": "^17.0.2",
  "react-test-renderer": "^17.0.2",
  "rimraf": "^3.0.2",
  "semantic-release": "^17.4.2",
  "serverless": "^1.83.3",
  "serverless-s3-deploy": "^0.9.0",
  "typescript": "^4.2.4",
  "webpack": "^4.46.0",
  "webpack-cli": "^3.3.12"
}

I'm in the process of updating of all my dependencies, this is the result of npm outdated:

@semantic-release/npm    7.0.9    7.1.0   7.1.0  @codedazur/react-components
@types/webpack         4.41.27  4.41.27  5.28.0  @codedazur/react-components
husky                    4.3.8    4.3.8   6.0.0  @codedazur/react-components
react-spring            8.0.27   8.0.27   9.0.0  @codedazur/react-components
webpack                 4.46.0   4.46.0  5.31.0  @codedazur/react-components
webpack-cli             3.3.12   3.3.12   4.6.0  @codedazur/react-components

With this setup everything is working fine. Now let's try to update to Webpack 5:

npm i webpack@latest webpack-cli@latest && npm i -D @storybook/builder-webpack5

Added the following part to my main.js configuration:

core: {
  builder: "webpack5",
}

After this when I try to start Storybook I get the following error:

10% building 0/14 entries 1/14 dependencies 0/0 modules(node:23201) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined
    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (/Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35
(node:23201) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:23201) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
99% done plugins webpack-hot-middlewarewebpack built preview 0f13fed3c7c293f9d2aa in 25450ms
(node:23201) UnhandledPromiseRejectionWarning: TypeError: compilation.getAssetPath is not a function
    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/index.js:169:25
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.emitAssets (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:491:19)
    at onCompiled (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:51:19)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
(node:23201) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

After some Googling I found this issue and running npm i --save-dev html-webpack-plugin solved the error above. I can now start Storybook but I get the following error:

Cannot GET /

And when I try to build Storybook I get the following error:

 /Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:113
            throw new TypeError(
            ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:113:10)
    at /Users/daviddelusenet/Development/react-components/node_modules/terser-webpack-plugin/dist/index.js:571:67
    at SyncHook.eval [as call] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:85:1)
    at SyncHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:321:11
    at Array.<anonymous> (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:534:20)
    at Storage.finished (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at callback (/Users/daviddelusenet/Development/react-components/node_modules/graceful-fs/polyfills.js:295:20)
    at FSReqCallback.oncomplete (fs.js:167:21)

Please let me know if you need any more information.

cascornelissen commented 3 years ago

I ran into a similar problem and had to install both html-webpack-plugin@latest and terser-webpack-plugin@latest manually to resolve everything. To figure out which plugin you need to install check the stacktrace that's included in the error. The second line starting with at usually shows which dependency is causing the issue.

So in the previous comment by @daviddelusenet, the first stacktrace includes the following on the second line. Installing html-webpack-plugin solved this for @daviddelusenet.

    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/index.js:169:25

The last snippet in that same comment includes the following on the second line.

    at /Users/daviddelusenet/Development/react-components/node_modules/terser-webpack-plugin/dist/index.js:571:67

This indicates that terser-webpack-plugin is now the one causing the error so that also needs to be installed via npm install --save-dev terser-webpack-plugin@latest to ensure the correct version is resolved when compiling.

Hope this helps anyone ✌🏼

shimorojune commented 3 years ago

@marjisound's npm i terser-webpack-plugin && npm remove terser-webpack-plugin fixed it for us 👏

This solved the problem for us too

Hypnosphi commented 3 years ago

@shilman for some reason, my setup broke after updating preview to webpack@5.32.0

https://github.com/JetBrains/ring-ui/tree/dependabot/npm_and_yarn%2Fwebpack-5.32.0 npm install && npm run bootstrap && npm run build

info @storybook/html v6.2.7
info 
info => Cleaning outputDir: /Users/jetbrains/IdeaProjects/ring-ui/dist
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "/Users/jetbrains/IdeaProjects/ring-ui/.storybook"
WARN unable to find package.json for @ungap/url-search-params
WARN unable to find package.json for postcss-font-family-system-ui
WARN unable to find package.json for merge-options
info => Adding stories defined in "/Users/jetbrains/IdeaProjects/ring-ui/.storybook/main.js"
info => Loading custom manager config
info => Using implicit CSS loaders
info => Using default Webpack5 setup
/Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/lib/util/MapHelpers.js:17
        const value = map.get(key);
                          ^

TypeError: Cannot read property 'get' of undefined
    at exports.provide (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/lib/util/MapHelpers.js:17:20)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/lib/DefinePlugin.js:289:51
    at SyncHook.eval [as call] (eval at create (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:321:11
    at Array.<anonymous> (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:546:12)
    at Storage.finished (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
jsdw commented 3 years ago

Just to chime in, I have hit precisely the same issue as @Hypnosphi has above using webpack 5.33.2

LeoRosse commented 3 years ago

Same issue for me as @Hypnosphi has above using webpack:5.35.1, I tried to install storybook in a clean project with npx sb@next init --builder webpack5 and I have this result when running start-storybook:

/node_modules/webpack/lib/util/MapHelpers.js:17
    const value = map.get(key);
                      ^

TypeError: Cannot read property 'get' of undefined
SimTheFool commented 3 years ago

Same issue with webpack 5. Is there any workaround around ?

milosrs commented 3 years ago

This is your answer: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

LeoRosse commented 3 years ago

@milosrs I have tried this npx sb@next init --builder webpack5 cause I have a clean webpack 5 project and the issue is the same... I have node version 14.16.1, npm version 6.14.12, and as I mentioned webpack version 5.35.1...

milosrs commented 3 years ago

@LeoRosse Delete @storybook/create-react-app plugin from package.json, try upgrading to npm v7.11 and run npm i --legacy-peer-deps

SimTheFool commented 3 years ago

Still not working for me with your procedure @milosrs . I never had @storybook/create-react-app plugin (I don't use create-react-app). I'm with npm 7.11.1 and webpack 5.24.3 and node 14.15.5

LeoRosse commented 3 years ago

same as @SimTheFool for me @milosrs .. I haven't created the project with create react app and I tried with npm 7.11.1, webpack 5.35.0 and node 14.16.1

milosrs commented 3 years ago

What are the versions of your storybook and addons?

SimTheFool commented 3 years ago

I got those plugins in package.json after installing storybook in the way you recommended.

   "@storybook/addon-actions": "^6.3.0-alpha.17",
    "@storybook/addon-essentials": "^6.3.0-alpha.17",
    "@storybook/addon-links": "^6.3.0-alpha.17",
    "@storybook/builder-webpack5": "^6.3.0-alpha.17",
    "@storybook/react": "^6.3.0-alpha.17",
LeoRosse commented 3 years ago

Same for me!

milosrs commented 3 years ago

I cant help you since I used create-react-app. The packages that you have are the same as mine.

mdobroggg commented 3 years ago

I didn't have terser-webpack-plugin at all and was running fine until a few days ago. I got this error as well and simply installing the plugin fixed it for me on the latest alphas (6.3.0-alpha.36)

Angry-Sparrow commented 3 years ago

I install terser-webpack-plugin by way of npm i -D terser-webpack-plugin. It works. But I still don't understand why I need terser-webpack-plugin.

vikashruhilgit commented 3 years ago

Hi,

it's been several days since i stuck with the issue,

i tried all the solution but no luck.

will be please help me out.

issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well.

but build-storybook fails, if i add any of the addons in .storybook.main.ts

error is:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20)

and also if i remove addons then also its fails and throw an error:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Usenode --trace-warnings ...to show where the warning was created) (node:43347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:43347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

my configurations are:

its a web component package library by open-wc generator.

then i upgraded that to latest storybook for sass support. everything is working except build-storybook

project dependencies and dev-dependencies are:

"dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" },

and main.js is:

`const path = require('path');

module.exports = { stories: [ '../stories/.stories.mdx', '../stories/.stories.@(js|jsx|ts|tsx)', ], addons: [ path.resolve('./.storybook/my-preset'), '@storybook/addon-essentials', ], core: { builder: 'webpack5', }, }; `

and my-preset is:

`const path = require('path');

module.exports = { managerWebpack: async (config, options) => { // update config here return config; }, managerBabel: async (config, options) => { // update config here return config; }, webpackFinal: async (config, { configType }) => { // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;

}, babel: async (config, options) => { return config; }, }; `

REPO is: https://github.com/vikashruhilgit/UI/

tylerexmg commented 2 years ago

I think this has to do with the storybook init installing both the webpack 4 and webpack 5 packages. The dependency for terser-webpack-plugin in webpack 4 is trumping the one in webpack 5 so it is breaking when trying to build with webpack 5. Manually installling terser-webpack-plugin then fixes the dependency but I think the ultimate fix should be for Storybook to remove all of the webpack 4 packages for users using webpack 5.

AntonyF-Andreani commented 2 years ago

In my case the same lines (suggested by @PascalPixel) helpme to fix the error on build:

npm i terser-webpack-plugin and then (because I'm on windows) npm remove terser-webpack-plugin.

I guess it has to do with dependencies. in my case use, React, Typescript, and react-doc-gen

This is the result of npm ls webpack

+-- @storybook/addon-essentials@6.4.19
| +-- @storybook/addon-docs@6.4.19
| | +-- @storybook/builder-webpack4@6.4.19
| | | +-- file-loader@6.2.0
| | | | `-- webpack@5.70.0 deduped
| | | +-- html-webpack-plugin@4.5.2
| | | | `-- webpack@4.46.0 deduped
| | | +-- postcss-loader@4.3.0
| | | | `-- webpack@5.70.0 deduped
| | | +-- raw-loader@4.0.2
| | | | `-- webpack@5.70.0 deduped
| | | +-- terser-webpack-plugin@4.2.3
| | | | `-- webpack@4.46.0 deduped
| | | +-- url-loader@4.1.1
| | | | `-- webpack@5.70.0 deduped
| | | +-- webpack-dev-middleware@3.7.3
| | | | `-- webpack@5.70.0 deduped
| | | +-- webpack-filter-warnings-plugin@1.2.1
| | | | `-- webpack@4.46.0 deduped
| | | `-- webpack@4.46.0
| | |   `-- terser-webpack-plugin@1.4.5
| | |     `-- webpack@4.46.0 deduped
| | `-- webpack@5.70.0 deduped
| `-- webpack@5.70.0
|   `-- terser-webpack-plugin@5.3.1
|     `-- webpack@5.70.0 deduped
+-- @storybook/addon-interactions@6.4.19
| `-- @storybook/core-common@6.4.19
|   +-- fork-ts-checker-webpack-plugin@6.5.0
|   | `-- webpack@4.46.0 deduped
|   `-- webpack@4.46.0
|     `-- terser-webpack-plugin@1.4.5
|       `-- webpack@4.46.0 deduped
+-- @storybook/preset-scss@1.0.3
| +-- css-loader@3.6.0
| | `-- webpack@5.70.0 deduped
| `-- style-loader@1.3.0
|   `-- webpack@5.70.0 deduped
+-- @storybook/react-docgen-typescript-plugin@1.0.2-canary.253f8c1.0
| `-- webpack@5.70.0 deduped
+-- @storybook/react@6.4.19
| +-- @pmmmwh/react-refresh-webpack-plugin@0.5.4
| | `-- webpack@5.70.0 deduped
| +-- @storybook/core@6.4.19
| | +-- @storybook/core-client@6.4.19
| | | `-- webpack@5.70.0 deduped
| | +-- @storybook/core-server@6.4.19
| | | +-- @storybook/manager-webpack4@6.4.19
| | | | +-- html-webpack-plugin@4.5.2
| | | | | `-- webpack@4.46.0 deduped
| | | | +-- terser-webpack-plugin@4.2.3
| | | | | `-- webpack@4.46.0 deduped
| | | | `-- webpack@4.46.0
| | | |   `-- terser-webpack-plugin@1.4.5
| | | |     `-- webpack@4.46.0 deduped
| | | `-- webpack@4.46.0
| | |   `-- terser-webpack-plugin@1.4.5
| | |     `-- webpack@4.46.0 deduped
| | `-- webpack@5.70.0 deduped
| `-- webpack@4.46.0
|   `-- terser-webpack-plugin@1.4.5
|     `-- webpack@4.46.0 deduped
+-- babel-loader@8.2.3
| `-- webpack@5.70.0 deduped
+-- html-webpack-plugin@5.5.0
| `-- webpack@5.70.0 deduped
+-- next@11.1.2
| `-- @next/react-refresh-utils@11.1.2
|   `-- webpack@5.70.0 deduped
+-- react-docgen-typescript-loader@3.7.2
| `-- @webpack-contrib/schema-utils@1.0.0-beta.0
|   `-- webpack@4.46.0
|     `-- terser-webpack-plugin@1.4.5
|       `-- webpack@4.46.0 deduped
+-- sass-loader@10.0.2
| `-- webpack@5.70.0 deduped
`-- ts-loader@8.2.0
  `-- webpack@5.70.0 deduped
fexxdev commented 2 years ago

I've (FINALLY) found a solution to this problem, hope it helps to somebody! First of all, you need to check which webpack version does @angular-devkit/build-angular use. Then, you have to had into devDependencies that exact version of webpack. Finally, this is what actually fixes the multiple webpack version issue:

"overrides": {
    "@storybook/addon-docs@6.5.9": {
        "webpack": "5.73.0"
    },
    "@storybook/angular@6.5.9": {
        "webpack": "5.73.0"
     }
  }

Cheers! :)

bzh2610 commented 1 year ago

I encountered a similar issue with the terser pluggin ( Storybook v7.0.0-alpha.47 + Angular 13 ), my workarround was to apply the following change in the webpackFinal parameter of .storybook/main.js

module.exports = {
 [...]
  webpackFinal: async (config) => {
    config.optimization.minimize = false;
    return config;
  },
};
hsuehic commented 1 year ago

Hi,

it's been several days since i stuck with the issue,

i tried all the solution but no luck.

will be please help me out.

issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well.

but build-storybook fails, if i add any of the addons in .storybook.main.ts

error is:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20)

and also if i remove addons then also its fails and throw an error:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Usenode --trace-warnings ...to show where the warning was created) (node:43347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:43347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

my configurations are:

its a web component package library by open-wc generator.

then i upgraded that to latest storybook for sass support. everything is working except build-storybook

project dependencies and dev-dependencies are:

"dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" },

and main.js is:

`const path = require('path');

module.exports = { stories: [ '../stories/.stories.mdx', '../stories/.stories.@(js|jsx|ts|tsx)', ], addons: [ path.resolve('./.storybook/my-preset'), '@storybook/addon-essentials', ], core: { builder: 'webpack5', }, }; `

and my-preset is:

`const path = require('path');

module.exports = { managerWebpack: async (config, options) => { // update config here return config; }, managerBabel: async (config, options) => { // update config here return config; }, webpackFinal: async (config, { configType }) => { // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;

}, babel: async (config, options) => { return config; }, }; `

REPO is: https://github.com/vikashruhilgit/UI/

Any updates? I encountered the same issue.

richirmInvgate commented 1 year ago

Hi, it's been several days since i stuck with the issue, i tried all the solution but no luck. will be please help me out. issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well. but build-storybook fails, if i add any of the addons in .storybook.main.ts error is: yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20) and also if i remove addons then also its fails and throw an error: yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Usenode --trace-warnings ...to show where the warning was created) (node:43347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:43347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. my configurations are: its a web component package library by open-wc generator. then i upgraded that to latest storybook for sass support. everything is working except build-storybook project dependencies and dev-dependencies are: "dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" }, and main.js is: const path = require('path'); module.exports = { stories: [ '../stories/_.stories.mdx', '../stories/_.stories.@(js|jsx|ts|tsx)', ], addons: [ path.resolve('./.storybook/my-preset'), '@storybook/addon-essentials', ], core: { builder: 'webpack5', }, }; and my-preset is: const path = require('path'); module.exports = { managerWebpack: async (config, options) => { // update config here return config; }, managerBabel: async (config, options) => { // update config here return config; }, webpackFinal: async (config, { configType }) => { //configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;

}, babel: async (config, options) => { return config; }, }; ` REPO is: https://github.com/vikashruhilgit/UI/

Any updates? I encountered the same issue.

I have the same issue