[英]Cannot use import statement outside a module using nuxtjs
I am trying to use vue-agile carousel, I can install and get it to run without any issues right after i install it, i am using NUXT, but after restarting my server i keep getting this error and can not find any solution for it我正在尝试使用 vue-agile carousel,我可以在安装后立即安装并让它运行而没有任何问题,我正在使用 NUXT,但是在重新启动我的服务器后,我不断收到此错误并且找不到任何解决方案
<template>
<div>
<agile>
<div class="slide">
<img src="/img/img2.jpg" alt="" />
</div>
<div class="slide">
<img src="/img/img1.jpg" alt="" />
</div>
</agile>
</div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>
Did you checked the documentation abouthow to use this plugin in Nuxt instead of a regular Vue?您是否查看过有关如何在 Nuxt 中使用此插件而不是常规 Vue 的文档?
plugins/vue-agile.js插件/vue-agile.js
import Vue from 'vue'
import VueAgile from 'vue-agile'
Vue.use(VueAgile)
nuxt.config.js nuxt.config.js
export default {
plugins: ['~/plugins/vue-agile', mode: 'client']
}
To use component without SSR use the client-only
component:要使用没有 SSR 的组件,请使用client-only
组件:
<client-only placeholder="Loading...">
<agile>...</agile>
</client-only>
EDIT : Add Shreerang's suggestion (comment below).编辑:添加 Shreerang 的建议(下面的评论)。
Sergio's answer above is mostly accurate, but needs a small tweek.塞尔吉奥的回答大多是准确的,但需要一个小的 tweek。
The nuxt.config.json
config needs the following update. nuxt.config.json
配置需要以下更新。 No build
config is required.不需要build
配置。
plugins: [
{ src: '~/plugins/vue-agile', mode: 'client' }
]
Add type="module"
in your script tag在脚本标签中添加type="module"
<script type="module">
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>
You need to mark vue-agile
to be transpiled in order to work on the server part (SSR).您需要将vue-agile
标记为要转译才能在服务器部分 (SSR) 上工作。
nuxt.config.js
: nuxt.config.js
:
...
build: {
transpile: [/vue-agile/]
}
...
As Brahim mentioned - I fixed it with:正如 Brahim 所提到的 - 我用以下方法修复了它:
build: {
transpile: ['npm-package-name'],
},
They mentioned this here - https://nuxtjs.org/docs/directory-structure/plugins/他们在这里提到了这一点 - https://nuxtjs.org/docs/directory-structure/plugins/
As example, in my case that was:例如,就我而言,这是:
['vue-picture-swipe']
from official Nuxt.js docs, they said.他们说,来自官方 Nuxt.js 文档。
If you get an Cannot use import statement outside a module error, you may need to add your package to the build > transpile option in nuxt.config.js for webpack loader to make your plugin available.如果您收到无法在模块之外使用导入语句错误,您可能需要将 package 添加到 webpack 加载程序的 nuxt.config.js 中的 build > transpile 选项中,以使您的插件可用。
Example例子
module.exports = {
build: {
transpile: ['vue-agile']
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.