svg-sprite-loader
svg-sprite-loader copied to clipboard
Usage with Storybook 6.2.0-beta.2 fails due to improper resolution of Webpack
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
@kirill-konshin how do I repro this?
@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...
So far I came up with following fix:
- Make sure
svg-sprite-loader
is not hoisted if you use yarn workspaces or similar, and it has fixed version5.2.1
- Install
patch-package
andpostinstall-postinstall
, and addpostinstall: patch-package
script, instruction https://github.com/ds300/patch-package#yarn - 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.
Any updates? This is still an issue...
any updates?