javascript - 在 Nuxt JS 中导入 SVG 时,Jest 中的 "[Vue warn]: Invalid Component definition"

标签 javascript vue.js svg nuxt.js

当我在正在测试的组件中导入 SVG 时,我的 Jest 单元测试中出现了一个错误:

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

    found in

    ---> <Navbar>
           <Root>

错误消息有点模糊,但是当我删除 SVG 文件的导入时它消失了,所以我假设如下所示的 SVG 导入是原因:

SVG import code

我在下面的链接中找到了涉及修改“vue.config.js”的 VueJS 解决方案,但它似乎不适用于 NuxtJS,因为那里没有这样的配置文件。我尝试在“nuxt.config.js”中这样做,但什么也没发生。

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

我的 SVG 加载器是“nuxt-svg-loader”。我的预感是 VueJS 不支持这个模块,我的测试使用“vue/test-utils”中的“shallowMount”,它运行 VueJS 而不是 NuxtJS。

任何想法将不胜感激。

最佳答案

我遇到了同样的问题,通过添加 ?inline 解决了到 SVG 的导入路径

关于javascript - 在 Nuxt JS 中导入 SVG 时,Jest 中的 "[Vue warn]: Invalid Component definition",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59596570/

相关文章:

javascript - 将 HTML 数组值存储到 javascript 数组中以通过 AJAX 发送

css - 如何在elementUI中编辑el-breadcrumb的样式

vue.js Uri 动态模板

html - 将 svg 元素拉伸(stretch)到 flex 容器的全高

JavaScript:附加到多个类

javascript - 如何从插件外部访问 jQuery 插件中的函数?

jquery - 使用 JQuery mobile 在 SVG 上触摸事件

svg - 如何在 SVG 中使用我自己的混合公式?

javascript - D3.js - Selection.call() 返回什么?

javascript - 获取元素的offsetHeight