Error when switching to webpack5 builder with ESM modules #14938

ohardy · 2021-05-14T16:29:33Z

Maybe it's related too: #11587

Describe the bug
When running storybook without webpack5 builder and ESM modules, everything is OK.
When changing to webpack5 builder, got errors:

ModuleNotFoundError: Module not found: Error: Can't resolve '[path]/node_modules/@storybook/client-logger' in '[path]/.storybook'
Did you mean 'index.js'?
BREAKING CHANGE: The request '[path]/node_modules/@storybook/client-logger' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:1765:28
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:730:13
    at eval (eval at create ([path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:273:22
    at eval (eval at create ([path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:402:22
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:117:11
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:646:24
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:800:8
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:920:5
    at [path]/node_modules/neo-async/async.js:6883:13
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:837:17
    at finishResolved ([path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at [path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/lib/Resolver.js:409:24
    at eval (eval at create ([path]/node_modules/@storybook/builder-webpack5/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:1:1), <anonymous>:27:1)
resolve '[path]/node_modules/@storybook/client-logger' in '[path]/.storybook'
  using description file: [path]/package.json (relative path: ./.storybook)
    Field 'browser' doesn't contain a valid alias configuration
    root path [path]
      using description file: [path]/package.json (relative path: .[path]/node_modules/@storybook/client-logger)
        Field 'browser' doesn't contain a valid alias configuration
        [path]/node_modules/@storybook/client-logger doesn't exist
    using description file: [path]/package.json (relative path: ./node_modules/@storybook/client-logger)
      Field 'browser' doesn't contain a valid alias configuration
      [path]/node_modules/@storybook/client-logger is not a file

To Reproduce
Complicate because it's a private repo for now. I will try to reproduce this soon in small repo.

System

Environment Info:

  System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Binaries:
    Node: 16.1.0 - /usr/local/bin/node
    npm: 7.11.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-essentials: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/addon-knobs: 6.3.0-alpha.21 => 6.3.0-alpha.21 
    @storybook/addon-links: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/addons: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/builder-webpack5: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/react: 6.3.0-alpha.27 => 6.3.0-alpha.27 
    @storybook/theming: 6.3.0-alpha.27 => 6.3.0-alpha.27

The text was updated successfully, but these errors were encountered:

shilman · 2021-05-15T00:33:39Z

Can you please create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description? We prioritize issues with reproductions over those without. Thank you! 🙏

em2724 · 2021-05-17T16:46:43Z

I was getting the same the last few days with @storybook/builder-webpack5": "^6.3.0-alpha.28.

Updated this evening to @storybook/builder-webpack5": "^6.3.0-alpha.29 but now getting:

ModuleNotFoundError: Module not found: Error: Can't resolve 'telejson' in '/Users/path-to-my-repo/node_modules/@storybook/channel-postmessage/dist/esm'

adamayres · 2021-05-17T23:45:47Z

If I pin telejson to version 5.3.0 then I see the first issue:

ModuleNotFoundError: Module not found: Error: Can't resolve './dom-event' in '/Users/adam.ayres/dev/lia/aurora/node_modules/@storybook/builder-webpack5/node_modules/@storybook/channel-postmessage/node_modules/telejson/dist'

If I use the latest, 5.3.1, then I see the secondary issue reported:

ModuleNotFoundError: Module not found: Error: Can't resolve 'telejson' in '/Users/path-to-my-repo/node_modules/@storybook/channel-postmessage/dist/esm'

If I pin telejson to version 5.2.0 then I do not see either of these issues. ~~Furthermore, I was able to reproduce both of the issues using both Storybook version 6.2.9 and 6.3.0-alpha.29 when using webpack 5~~. Correction: I was only able to reproduce this when using "@storybook/builder-webpack5": "6.3.0-alpha.29". Since I use npm as opposed to yarn, I pinned telejson to 5.2.0 using npm-force-resolutions. Something like this in package.json:

"scripts": {
  "preinstall": "npx npm-force-resolutions"
},
"resolutions": {
  "telejson": "5.2.0"
}

These two issues appear to be related to these two changes in telejson:

storybookjs/telejson#65
storybookjs/telejson#67

cc @ndelangen

JounQin · 2021-05-18T07:57:52Z

For storybookjs/telejson, I think this is because lodash/get is used in ESM.

ndelangen · 2021-05-18T09:54:02Z

@adamayres I released a patch of telejson, would be be able to check if this resolved the issue?

@JounQin Can you assist? I'm not sure what changed i should make based on your comment.

JounQin · 2021-05-18T11:19:28Z

@ndelangen I'm not sure if this is the thing.

Firstly, the module field incorrectly points to dist/index.mjs.
https://github.com/storybookjs/telejson/blob/master/package.json#L29, maybe webpack try this field first and fails.

And for .mjs extensions, plain ESM should be used, but lodash/get is obviously not. Can we rewrite it to lodash-es/get after compiling?

eirslett · 2021-05-18T20:13:18Z

@adamayres what if you pin telejson to version 5.3.2?

adamayres · 2021-05-18T21:24:15Z

@ndelangen @eirslett I pinned to 5.3.2 and can confirm that this fixed the problem for me.

shilman · 2021-05-19T01:30:17Z

thanks @adamayres, merged & releasing now

ndelangen · 2021-05-20T09:49:16Z

Firstly, the module field incorrectly points to dist/index.mjs.

Damn, I missed that, I released a patch for this. Real sorry!

ohardy · 2021-05-24T11:29:36Z

With last version (v6.3.0-alpha.41), issue is not same anymore (I updated everything following #15001).

Now, the error is:

ERR! Error: Cannot find module '../presets/manager-preset'
ERR! Require stack:
ERR! - [path]/node_modules/@storybook/manager-webpack5/dist/cjs/index.js
ERR! - [path]/node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js
...

shilman · 2021-05-24T11:53:29Z

@ohardy make sure every SB package is alpha.41

JounQin · 2021-05-24T12:13:09Z

@shilman Another problem not an issue actually is, @storybook/addon-knobs is still 6.3.0-alpha.21, and its dependencies are locked.

shilman · 2021-05-24T12:41:13Z

I'll need to do another release of @storybook/addon-knobs. I've removed it from the monorepo, so there's some work needed to get it set up again in its new home: https://github.com/storybookjs/addon-knobs.

We released addon-controls in Storybook 6.0. I recommend upgrading to controls if you can!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs, which are slated for deprecation.

ohardy · 2021-05-24T15:57:06Z

I just migrate to addon-controls, thanks, and I fixed many versions.

New error:

ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import "[path]/node_modules/core-js/modules/es.object.keys.js";
| import "[path]/node_modules/core-js/modules/es.symbol.js";
| import "[path]/node_modules/core-js/modules/es.array.filter.js";
    at handleParseError ([path]/node_modules/webpack/lib/NormalModule.js:920:19)
    at [path]/node_modules/webpack/lib/NormalModule.js:1022:5
    at processResult ([path]/node_modules/webpack/lib/NormalModule.js:742:11)
    at [path]/node_modules/webpack/lib/NormalModule.js:806:5
    at [path]/node_modules/loader-runner/lib/LoaderRunner.js:406:3
    at iterateNormalLoaders ([path]/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
    at iterateNormalLoaders ([path]/node_modules/loader-runner/lib/LoaderRunner.js:239:10)
    at [path]/node_modules/loader-runner/lib/LoaderRunner.js:254:3
    at context.callback ([path]/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at [path]/node_modules/babel-loader/lib/index.js:59:71
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import '@storybook/react';
    at handleParseError ([path]/node_modules/webpack/lib/NormalModule.js:920:19)
    at [path]/node_modules/webpack/lib/NormalModule.js:1022:5
    at processResult ([path]/node_modules/webpack/lib/NormalModule.js:742:11)
    at [path]/node_modules/webpack/lib/NormalModule.js:806:5
    at [path]/node_modules/loader-runner/lib/LoaderRunner.js:406:3
    at iterateNormalLoaders ([path]/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
    at iterateNormalLoaders ([path]/node_modules/loader-runner/lib/LoaderRunner.js:239:10)
    at [path]/node_modules/loader-runner/lib/LoaderRunner.js:254:3
    at context.callback ([path]/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at [path]/node_modules/babel-loader/lib/index.js:59:71
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

shilman · 2021-05-24T16:25:55Z

@ohardy Can you please create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description? We prioritize issues with reproductions over those without. Thank you! 🙏

yngvebn · 2021-05-25T07:08:10Z

@shilman I noticed the presets/manager-presets error after doing a clean npx sb@next init --builder webpack5 (in an Angular 12 project). All packages were correct, except the @storybook/manager-webpack5 package:

    "@storybook/addon-actions": "^6.3.0-alpha.43",
    "@storybook/addon-essentials": "^6.3.0-alpha.43",
    "@storybook/addon-links": "^6.3.0-alpha.43",
    "@storybook/angular": "^6.3.0-alpha.43",
    "@storybook/builder-webpack5": "^6.3.0-alpha.43",
    "@storybook/manager-webpack5": "^6.3.0-alpha.37",

When consolidating the versions it worked as expected.

shilman · 2021-05-25T07:26:29Z

@yngvebn I think this is a bug on the NPM servers / propagation / caching? There's no mention of alpha.37 in our code as far as I can tell. I've seen the issue too but it's a mystery. I'm expecting the problem to go away in the next 48 hours. 🙏

ohardy · 2021-05-25T17:05:07Z

@shilman I spent a lot of time to find the problem. I ended up changing the position of storybook in my mono repo, and started from a base with npx sb@next init --builder webpack5, and everything works fine with the last version of webpack5 builder now.

Thanks a lot for the corrections :)

shilman · 2021-05-25T17:44:24Z

great news @ohardy!! thanks for the update 🙏

bdefore · 2021-06-09T14:39:34Z

i'm encountering a similar issue with storybook 6.2.9 as well as 6.3.0-rc.0 with the time-input-polyfill library for which i've filed an issue (Dan503/time-input-polyfill#35)

ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve './core/setters/apply_default' in '/Users/REDACTED/REDACTED/node_modules/time-input-polyfill'
ERR! Did you mean 'apply_default.js'?
ERR! BREAKING CHANGE: The request './core/setters/apply_default' failed to resolve only because it was resolved as fully specified
ERR! (probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
ERR! The extension in the request is mandatory for it to be fully specified.
ERR! Add the extension to the request.

This occurs in my storybook build, even though the webpack build succeeds, where i'm configuring a rule for mjs files:

      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false,
        },
      },

EDIT: was able to get past this issue by importing from time-input-polyfill/auto instead of time-input-polyfill and can subsequently remove the above webpack config with fullySpecified. note though that a similar issue happens with graphql library 14 (latest is 15). unfortunately am now encountering a different issue with 6.3.0-rc.0, perhaps unrelated:

/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1056
                                const state = dep.getModuleEvaluationSideEffectsState(moduleGraph);
                      ^
TypeError: dep.getModuleEvaluationSideEffectsState is not a function
    at NormalModule.getSideEffectsConnectionState (/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1056:23)
    at /Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/optimize/SideEffectsFlagPlugin.js:244:19
    at Hook.eval (eval at create (/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:10:16)
    at Hook.CALL_DELEGATE [as _call] (/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/Hook.js:14:14)
    at Compilation.seal (/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2246:42)
    at /Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1097:20
    at /Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2213:4
    at _next2 (eval at create (/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
    at eval (eval at create (/Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:69:1)
    at /Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:376:11
    at /Users/REDACTED/REDACTED/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/REDACTED/REDACTED/node_modules/neo-async/async.js:2850:39)
    at /Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:355:18
    at /Users/REDACTED/REDACTED/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/REDACTED/REDACTED/node_modules/neo-async/async.js:2850:39)
    at /Users/REDACTED/REDACTED/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:48:16
error Command failed with exit code 1.

Edit: Someone else created an issue for this, moving conversation to there: #15221

If I use 6.2.9 I don't see this error and storybook builds successfully, although per the above discussion about telejson, I need to add the following to my package.json (i'm using yarn)

  "resolutions": {
    "telejson": "5.3.3"
  },

bertho-zero · 2021-12-22T17:06:17Z

I fixed my issue with:

  webpackFinal(config) {
    config.module.rules.push({
      test: /\.(js|mjs|jsx)$/,
      enforce: 'pre',
      loader: require.resolve('source-map-loader'),
      resolve: {
        fullySpecified: false,
      },
    })
    return config;
  }

ohardy added bug needs triage labels May 14, 2021

shilman added configuration babel / webpack builder-webpack5 needs reproduction and removed needs triage labels May 15, 2021

eirslett mentioned this issue May 18, 2021

Bump telejson to 5.3.2 to use the ESM version #14983

Merged

ndelangen closed this as completed Jan 17, 2023

seonghyeonkimm mentioned this issue Feb 3, 2023

[Bug]: Webpack 5 needed for nullish coalition but webpack 5 and esm dont work #19674

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when switching to webpack5 builder with ESM modules #14938

Error when switching to webpack5 builder with ESM modules #14938

ohardy commented May 14, 2021

shilman commented May 15, 2021

em2724 commented May 17, 2021

adamayres commented May 17, 2021 •

edited

Loading

JounQin commented May 18, 2021 •

edited

Loading

ndelangen commented May 18, 2021

JounQin commented May 18, 2021

eirslett commented May 18, 2021

adamayres commented May 18, 2021

shilman commented May 19, 2021

ndelangen commented May 20, 2021

ohardy commented May 24, 2021

shilman commented May 24, 2021

JounQin commented May 24, 2021

shilman commented May 24, 2021

ohardy commented May 24, 2021

shilman commented May 24, 2021

yngvebn commented May 25, 2021 •

edited

Loading

shilman commented May 25, 2021

ohardy commented May 25, 2021

shilman commented May 25, 2021

bdefore commented Jun 9, 2021 •

edited

Loading

bertho-zero commented Dec 22, 2021

Error when switching to webpack5 builder with ESM modules #14938

Error when switching to webpack5 builder with ESM modules #14938

Comments

ohardy commented May 14, 2021

shilman commented May 15, 2021

em2724 commented May 17, 2021

adamayres commented May 17, 2021 • edited Loading

JounQin commented May 18, 2021 • edited Loading

ndelangen commented May 18, 2021

JounQin commented May 18, 2021

eirslett commented May 18, 2021

adamayres commented May 18, 2021

shilman commented May 19, 2021

ndelangen commented May 20, 2021

ohardy commented May 24, 2021

shilman commented May 24, 2021

JounQin commented May 24, 2021

shilman commented May 24, 2021

ohardy commented May 24, 2021

shilman commented May 24, 2021

yngvebn commented May 25, 2021 • edited Loading

shilman commented May 25, 2021

ohardy commented May 25, 2021

shilman commented May 25, 2021

bdefore commented Jun 9, 2021 • edited Loading

bertho-zero commented Dec 22, 2021

adamayres commented May 17, 2021 •

edited

Loading

JounQin commented May 18, 2021 •

edited

Loading

yngvebn commented May 25, 2021 •

edited

Loading

bdefore commented Jun 9, 2021 •

edited

Loading