Error on call file, require().default has undefined and no render

[OsirisFrik]

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

[JaZo]

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?

[wrainbird]

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');
  }
};

[JaZo]

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!

[JaZo]

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.