App can't render SVGs after the latest VueCLI upgrade #7084
Comments
|
Try this solution. |
|
@dromba did you manage to get it working? I have a very hybrid solution that needs to support Can you share your config? |
|
@Irevall @dagadbm I still haven't managed to make it work. My current config is this: @vue/cli v5.0.4 vue.config.js:Have you managed to solve something? When I try to import an SVG and use it as a component, it doesn't work. |
|
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. |
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 |
|
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 This is my full 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 + '/' : '/'
} |
|
Oh, if I change it to just this, it works fine: That was simple enough... Thank you for pointing me in the right direction :) Looks like I can upgrade Vue CLI now! |
|
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: 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 :/ |
|
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:
***@***.***>
|
|
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) |
|
@kubajmarek thanks for your help.. added vue-svg-loader-2 to package json.. still did not work, same error INFO Starting development server... 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 |
|
@ganeshkumarpolipalli-accolite can you upload a reproduction anywhere? Something might be wrong with the icon or Work.vue. |
Version
5.0.4
Reproduction link
github.com
Environment info
Steps to reproduce
import IconWord from './assets/icon-word.svg?inline'<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: