Closed OsirisFrik closed 5 years ago
Hi @OsirisFrik, I can not reproduce this issue. We are using the component with require(...).default.url
in multiple projects just fine. It seems like svg-sprite loader isn't matching your icons, so I think it's a configuration error. Do you have a minimal working example or can you share your vue.config.js?
I am also receiving this error, this is my configuration:
module.exports = {
pluginOptions: {
svgSprite: {
/*
* The directory containing your SVG files.
*/
dir: 'src/assets/icons',
/*
* The reqex that will be used for the Webpack rule.
*/
test: /\.(svg)(\?.*)?$/,
/*
* @see https://github.com/kisenka/svg-sprite-loader#configuration
*/
loaderOptions: {
extract: true,
spriteFilename: 'img/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false
},
/*
* @see https://github.com/kisenka/svg-sprite-loader#configuration
*/
pluginOptions: {
plainSprite: true
}
}
}
};
module.exports = {
chainWebpack: config => {
config.module
.rule('svg-sprite')
.use('svgo-loader')
.loader('svgo-loader');
}
};
It looks like it has something to do with the esModule
config option of the loader. If you add esModule: true
to the loaderOptions, it should fix it. This option is autodetected based on your Webpack version, but it seems the detection is off. I'll investigate it!
I've updated the SvgIcon component to work with both CommonJS and ES Module exports (d956eaf523f9a14dd0f87a10342fbee116198d4c). You can update your component based on the fix.
Detailed description
Fail on import SVG file with
debugging this error has detect the import not is correct, in the console can view this error
Cannot read property 'url' of undefined
So i add console log for check what is the problem, and yep, the problem origin inrequire().default
My logs:I said "ok, with this is fixed", but... now I se that does not render the svg, so, check if file it's available in te site... and yes, it is.
Context
Why is this change important to you? How would you use it? For correct load files
How can it benefit other users? Clear installation
Possible implementation
Right now i trying to fix this and if i can find a solution send a PR to update this, but if anyone same error and fixed, please comment your solution 😄
Your environment