Usage with Storybook 6.2.0-beta.2 fails due to improper resolution of Webpack

[kirill-konshin]

What is the current behavior?

If user has Storybook of version 6.2 and newer, and if user has it configured to use Webpack 5, there will be two Webpack versions installed: version 5 for stories and version 4 for manager. Somehow the following statement in file lib/utils/get-webpack-version.js

const webpackVersion = require.main.require('webpack/package.json').version;

Returns the version 4, I patched in node_modules to

const webpackVersion = require('webpack/package.json').version;

And it properly resolved to version 5.

What is the expected behavior?

Please provide either the option to override webpack version via loader config, or correctly resolve the proper webpack.

Please tell us about your environment:

• webpack version: 5
• svg-sprite-loader version: 5.2.1

[shilman]

@kirill-konshin how do I repro this?

[kirill-konshin]

@kirill-konshin how do I repro this?

Here's the sandbox: https://codesandbox.io/s/storybook-webpack5-svg-sprite-loader-2kl7e?file=/.storybook/main.js

If it does not launch automatically, create a new terminal tab and do yarn start, you'll see:

sandbox@sse-sandbox-2kl7e:/sandbox$ yarn start
yarn run v1.22.10
$ start-storybook -p 9001 -c .storybook
info @storybook/react v6.2.0-beta.3
info
ERR! Error: Cannot find module 'webpack/lib/RuleSet'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
ERR!     at Module.require (internal/modules/cjs/loader.js:692:17)
ERR!     at require (internal/modules/cjs/helpers.js:25:18)
ERR!     at Object.<anonymous> (/sandbox/node_modules/svg-sprite-loader/lib/utils/get-matched-rule-4.js:3:17)
ERR!     at Module._compile (internal/modules/cjs/loader.js:778:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:653:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:692:17)
ERR!     at require (internal/modules/cjs/helpers.js:25:18)
ERR!     at Object.<anonymous> (/sandbox/node_modules/svg-sprite-loader/lib/utils/get-matched-rule.js:11:20)
ERR!     at Module._compile (internal/modules/cjs/loader.js:778:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:653:32)

Somehow there's no true trace, but it's this line: https://github.com/JetBrains/svg-sprite-loader/blob/master/lib/utils/get-matched-rule-4.js#L3 and as you see, it's for WP4...

[kirill-konshin]

So far I came up with following fix:

1. Make sure svg-sprite-loader is not hoisted if you use yarn workspaces or similar, and it has fixed version 5.2.1
2. Install patch-package and postinstall-postinstall, and add postinstall: patch-package script, instruction https://github.com/ds300/patch-package#yarn

3. Add a patch patches/svg-sprite-loader+5.2.1.patch:

   diff --git a/node_modules/svg-sprite-loader/lib/utils/get-webpack-version.js b/node_modules/svg-sprite-loader/lib/utils/get-webpack-version.js
   index e300ef1..748cb94 100644
   --- a/node_modules/svg-sprite-loader/lib/utils/get-webpack-version.js
   +++ b/node_modules/svg-sprite-loader/lib/utils/get-webpack-version.js
   @@ -3,7 +3,7 @@
    if (!require.main) {
      require.main = { require };
    }
   -const webpackVersion = require.main.require('webpack/package.json').version;
   +const webpackVersion = require('webpack/package.json').version;
   
    /**
     * @param {boolean} [onlyMajor=true]

Did the trick for me.

[kirill-konshin]

Any updates? This is still an issue...

[dobernike]

any updates?