'"[Vue warn]: Invalid Component definition" in Jest when importing an SVG in Nuxt JS

I have an error exclusively in my Jest unit test when I import an SVG in the component being tested:

console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Invalid Component definition: 

    found in

    ---> <Navbar>
           <Root>

The error message is a bit vague, but it disappears when I remove the import for the SVG file, so I assumed the SVG import as shown below is the cause:

SVG import code

I found solutions for VueJS that involve modifying "vue.config.js" like in the link below, but it does not seem to work for NuxtJS as there is no such config file there. I tried doing it in 'nuxt.config.js" but nothing happened.

SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition

My SVG loader is "nuxt-svg-loader." A hunch of mine is this module is not supported by VueJS, and my test uses "shallowMount" from "vue/test-utils" which runs VueJS instead of NuxtJS.

Any thoughts would be appreciated.

Solution 1:^[1]

I had the same issue and it was resolved by adding ?inline to the import path of the SVG

Solution 2:^[2]

For those who still encounter this problem...

A solution hast been found here by @visualfanatic: https://github.com/visualfanatic/vue-svg-loader/issues/38#issuecomment-407657015

You can also use jest-transform-stub, but it does not seems to work all the time.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Impossible Reality
Solution 2	ThisIsMyName

'"[Vue warn]: Invalid Component definition" in Jest when importing an SVG in Nuxt JS

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]