Error on call file, require().default has undefined and no render
OsirisFrik opened this issue · 4 comments
Detailed description
Fail on import SVG file with
iconPath() {
return require(`@/assets/icons/${this.name}.svg`).default.url;
}
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 in require().default
My logs:
console.log(require(`@/assets/icons/${this.name}.svg`).default.url) // => error
console.log(require(`@/assets/icons/${this.name}.svg`).default) // => undefined
console.log(require(`@/assets/icons/${this.name}.svg`)) // => '/img/{name}.{hash}.svg'
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
- Version used (e.g. Node 10): v10.13
- Operating system and version (e.g. Ubuntu 16.04, Windows 7): macOs 1.14.1
- Vue: Vue cli 3.3
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');
}
};