App can't render SVGs after the latest VueCLI upgrade #7084

techwizzdom · 2022-03-30T12:05:19Z

Version

5.0.4

Reproduction link

Environment info

➜  broken-svgs git:(main) vue info

Environment Info:

  System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 17.8.0 - ~/.nvm/versions/node/v17.8.0/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v17.8.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Edge: Not Found
    Firefox: 95.0
    Safari: 15.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.4
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.4
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.4
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.4
    @vue/cli-plugin-router:  5.0.4
    @vue/cli-plugin-vuex:  5.0.4
    @vue/cli-service: ~5.0.0 => 5.0.4
    @vue/cli-shared-utils:  5.0.4
    @vue/component-compiler-utils:  3.3.0
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.3 => 8.5.0
    svg-to-vue:  0.7.0
    vue: ^2.6.14 => 2.6.14
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.0.0 (15.9.8)
    vue-style-loader:  4.1.3
    vue-svg-loader: ^0.16.0 => 0.16.0
    vue-template-compiler: ^2.6.14 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 5.0.4

Steps to reproduce

Create a Vue 2 project
Install vue-svg-loader, vue-template-compiler, file-loader
Update webpack config like https://github.com/orbitalwitness/broken-svgs/blob/main/vue.config.js
Start the app (npm-run-serve)
Import icon as a component (inline) import IconWord from './assets/icon-word.svg?inline'
Try to render it as an image src (external) <img src="./assets/icon-word.svg" />

What is expected?

Icons should be rendered.

What is actually happening?

None of the icons is rendered.

I suspect this is connected to Asset Modules in Webpack (https://webpack.js.org/guides/asset-modules/).

Currently, we have both inline and external SVGs in our project but it doesn't seem to work after the Vue CLI upgrade.

The text was updated successfully, but these errors were encountered:

kubajmarek · 2022-03-31T21:52:14Z

Try this solution.

dagadbm · 2022-04-19T18:11:29Z

@dromba did you manage to get it working?

I have a very hybrid solution that needs to support html-loader because of an external package I have been trying some solutions on and off what was suggested here but getting this to work has been tricky:

<img src="@/assets/svgs/logo.svg"/>

Can you share your config?

techwizzdom · 2022-05-11T14:22:15Z

@Irevall @dagadbm I still haven't managed to make it work.

My current config is this:

@vue/cli v5.0.4
npm v8.5.5
node v17.8.0

vue.config.js:

chainWebpack: (config) => {
        const svgRule = config.module.rule('svg');
        console.log(svgRule)
        console.log('\n\n\n\n\n')
        svgRule.uses.clear();
        svgRule.delete('type');
        svgRule.delete('generator');
        svgRule
            .use('vue-loader')
            .loader('vue-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader');
    },

Have you managed to solve something?

When I try to import an SVG and use it as a component, it doesn't work.

connorshea · 2022-05-11T23:56:52Z

I've got the exact same problem, stuck on beta6 because of it 😅 I'm using html-loader since I never managed to get vue-svg-loader working in the past.

dagadbm · 2022-05-12T07:38:05Z

const { defineConfig } = require('@vue/cli-service');
module.exports` = defineConfig({
	transpileDependencies: true,
	chainWebpack: (config) => {
		// SVG loader
		const svgRule = config.module.rule('svg');
		svgRule.uses.clear();

		// https://github.com/vuejs/vue-cli/issues/6785
		svgRule.delete('type');
		svgRule.delete('generator');

		svgRule
			// load svgs as data-urls on scss using url('/path/to/svg?dataurl')
			.oneOf('dataurl')
			.resourceQuery(/dataurl/)
			.use('svg-url-loader')
			.loader('svg-url-loader')
			.end()
			.end()
			// load svgs as vue components when importing svg files
			.oneOf('vue-component')
			.test(/.*\.svg/)
			.use('vue-svg-loader')
			.loader('vue-svg-loader')
			.end()
			.end();
	},
});

I have something similar to this. I deleted an extra set of rules I had because of an external library at work.

Let me know if it worked

connorshea · 2022-05-14T19:01:43Z

I converted it over to using vue-svg-loader on Vue CLI 5.0.0-beta.6, and everything works there (with just a "normal" setup from the README). Then when I upgrade Vue CLI any further and replace the SVG loading code in vue.config.js with what you suggested, it seems to error as though my SVGs are invalid 🤔

Compiled with problems:

ERROR in ./src/assets/icons/chevron-down.svg 1:0

Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-svg-loader/index.js
You may need an additional loader to handle the result of these loaders.
> <template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg></template>


ERROR in ./src/assets/icons/heart-broken.svg 1:0

Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-svg-loader/index.js
You may need an additional loader to handle the result of these loaders.
> <template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M473.7 73.8l-2.4-2.5c-46-47-118-51.7-169.6-14.8L336 159.9l-96 64 48 128-144-144 96-64-28.6-86.5C159.7 19.6 87 24 40.7 71.4l-2.4 2.4C-10.4 123.6-12.5 202.9 31 256l212.1 218.6c7.1 7.3 18.6 7.3 25.7 0L481 255.9c43.5-53 41.4-132.3-7.3-182.1z"/></svg></template>

This is my full vue.config.js with the changes to try and get it working with newer versions of Vue CLI:

module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();

    // https://github.com/vuejs/vue-cli/issues/6785
    svgRule.delete('type');
    svgRule.delete('generator');

    svgRule
      // load svgs as data-urls on scss using url('/path/to/svg?dataurl')
      .oneOf('dataurl')
      .resourceQuery(/dataurl/)
      .use('svg-url-loader')
      .loader('svg-url-loader')
      .end()
      .end()
      // load svgs as vue components when importing svg files
      .oneOf('vue-component')
      .test(/.*\.svg/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .end()
      .end();
  },
  // For properly setting the base path in 'production' with GitLab Pages.
  publicPath: process.env.NODE_ENV === 'production' ? '/' + process.env.CI_PROJECT_NAME + '/' : '/'
}

connorshea · 2022-05-14T19:02:59Z

Oh, if I change it to just this, it works fine:

    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();

    // https://github.com/vuejs/vue-cli/issues/6785
    svgRule.delete('type');
    svgRule.delete('generator');

    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');

That was simple enough...

Thank you for pointing me in the right direction :) Looks like I can upgrade Vue CLI now!

connorshea · 2022-05-14T19:42:55Z

EDIT: Fixed this immediately after posting again lol. I used the solution from this, but applied it to SVGs instead of CSS: https://stackoverflow.com/questions/46177148/how-to-exclude-css-module-files-from-jest-test-suites/46177325#46177325

I'm not sure if there are any downsides to this approach, but all my tests pass without warnings now, so 🤷‍♂️

=======

Now my only problem is that the Jest tests print warnings about all of the SVG components not being registered:

  ● Console

    console.warn
      [Vue warn]: Failed to resolve component: chevron-down-icon
      If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
        at <GameCard game= {
        id: 1,
        name: "Kirby's Epic Yarn",
        platforms: { nodes: [ [Object] ] },
        developers: { nodes: [ [Object] ] },
        isFavorited: true
      } ref="VTU_COMPONENT" > 
        at <VTUROOT>



      at warn (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40:17)
      at resolveAsset (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5973:13)
      at resolveComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5922:12)
      at Proxy.render (src/components/GameCard.vue:143:40)
      at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:889:44)
      at ReactiveEffect.componentUpdateFn [as fn] (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4990:57)
      at ReactiveEffect.run (node_modules/@vue/reactivity/dist/reactivity.cjs.js:189:25)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5116:9)

I guess I can just call them custom components? But technically they're not. Unfortunately the Jest configuration that vue-svg-loader suggests doesn't work with the most recent versions of Vue/Vue CLI/Jest :/

dagadbm · 2022-05-14T21:19:48Z

This is the easiest one to fix: damianstasik/vue-svg-loader#38 https://vue-svg-loader.js.org/faq.html#how-to-use-this-loader-with-typescript

…

On Sat, May 14, 2022, 20:43 Connor Shea ***@***.***> wrote: Now my only problem is that the Jest tests print warnings about all of the SVG components not being registered: ● Console console.warn [Vue warn]: Failed to resolve component: chevron-down-icon If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <GameCard game= { id: 1, name: "Kirby's Epic Yarn", platforms: { nodes: [ [Object] ] }, developers: { nodes: [ [Object] ] }, isFavorited: true } ref="VTU_COMPONENT" > at <VTUROOT> at warn ***@***.***/runtime-core/dist/runtime-core.cjs.js:40:17) at resolveAsset ***@***.***/runtime-core/dist/runtime-core.cjs.js:5973:13) at resolveComponent ***@***.***/runtime-core/dist/runtime-core.cjs.js:5922:12) at Proxy.render (src/components/GameCard.vue:143:40) at renderComponentRoot ***@***.***/runtime-core/dist/runtime-core.cjs.js:889:44) at ReactiveEffect.componentUpdateFn [as fn] ***@***.***/runtime-core/dist/runtime-core.cjs.js:4990:57) at ReactiveEffect.run ***@***.***/reactivity/dist/reactivity.cjs.js:189:25) at setupRenderEffect ***@***.***/runtime-core/dist/runtime-core.cjs.js:5116:9) I guess I can just call them custom components? But technically they're not. Unfortunately the Jest configuration that vue-svg-loader suggests doesn't work with the most recent versions of Vue/Vue CLI/Jest :/ — Reply to this email directly, view it on GitHub <#7084 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD7WGR5KOBO4ZL5ZPNGX7MLVJ764ZANCNFSM5SBWLKSA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

anthonylebrun · 2022-05-24T02:43:22Z

For anyone facing the same issue as @connorshea with jest warnings, I figured out a fix that works here: damianstasik/vue-svg-loader#38 (comment)

ganeshkumarpolipalli-accolite · 2024-02-09T15:45:40Z

#7448

any help? @dagadbm can you please help?

kubajmarek · 2024-02-09T20:04:02Z

#7448

any help?

vue-svg-loader is just 20 lines of unmaintained code that doesn't do a whole lot, I think the best idea is to create your own SVG loader instead.

Alternatively maybe you could use this.

ganeshkumarpolipalli-accolite · 2024-02-12T10:47:48Z

@kubajmarek thanks for your help.. added vue-svg-loader-2 to package json.. still did not work, same error

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 error

error in ./src/assets/icons/icons.svg?arrow-left

Syntax Error: TypeError: iconInfo.hasOwnProperty is not a function

@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Work.vue?vue&type=script&lang=js 44:0-67 443:20-29
@ ./src/views/Work.vue?vue&type=script&lang=js
@ ./src/views/Work.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?sockjs-node (webpack)/hot/dev-server.js ./src/main.js**

kubajmarek · 2024-02-16T08:03:15Z

@ganeshkumarpolipalli-accolite can you upload a reproduction anywhere? Something might be wrong with the icon or Work.vue.

ganeshkumarpolipalli-accolite mentioned this issue Feb 9, 2024

Npm run serve svg error 98% after emitting CopyPlugin #7448

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App can't render SVGs after the latest VueCLI upgrade #7084

App can't render SVGs after the latest VueCLI upgrade #7084

techwizzdom commented Mar 30, 2022

kubajmarek commented Mar 31, 2022

dagadbm commented Apr 19, 2022

techwizzdom commented May 11, 2022

connorshea commented May 11, 2022

dagadbm commented May 12, 2022

connorshea commented May 14, 2022

connorshea commented May 14, 2022 •

edited

Loading

connorshea commented May 14, 2022 •

edited

Loading

dagadbm commented May 14, 2022 via email

anthonylebrun commented May 24, 2022

ganeshkumarpolipalli-accolite commented Feb 9, 2024 •

edited

Loading

kubajmarek commented Feb 9, 2024 •

edited

Loading

ganeshkumarpolipalli-accolite commented Feb 12, 2024 •

edited

Loading

kubajmarek commented Feb 16, 2024

App can't render SVGs after the latest VueCLI upgrade #7084

App can't render SVGs after the latest VueCLI upgrade #7084

Comments

techwizzdom commented Mar 30, 2022

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

kubajmarek commented Mar 31, 2022

dagadbm commented Apr 19, 2022

techwizzdom commented May 11, 2022

vue.config.js:

connorshea commented May 11, 2022

dagadbm commented May 12, 2022

connorshea commented May 14, 2022

connorshea commented May 14, 2022 • edited Loading

connorshea commented May 14, 2022 • edited Loading

dagadbm commented May 14, 2022 via email

anthonylebrun commented May 24, 2022

ganeshkumarpolipalli-accolite commented Feb 9, 2024 • edited Loading

kubajmarek commented Feb 9, 2024 • edited Loading

ganeshkumarpolipalli-accolite commented Feb 12, 2024 • edited Loading

kubajmarek commented Feb 16, 2024

connorshea commented May 14, 2022 •

edited

Loading

connorshea commented May 14, 2022 •

edited

Loading

ganeshkumarpolipalli-accolite commented Feb 9, 2024 •

edited

Loading

kubajmarek commented Feb 9, 2024 •

edited

Loading

ganeshkumarpolipalli-accolite commented Feb 12, 2024 •

edited

Loading