无法在使用 nuxtjs 的模块外部使用 import 语句答案

【问题标题】：Cannot use import statement outside a module using nuxtjs无法在使用 nuxtjs 的模块外部使用 import 语句
【发布时间】：2020-09-30 06:51:30
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你找到解决方案了吗？

标签： javascript vue.js nuxt.js

【解决方案1】：

您是否查看了有关 how to use this plugin in Nuxt 而不是常规 Vue 的文档？

plugins/vue-agile.js

import Vue from 'vue'
import VueAgile from 'vue-agile'

Vue.use(VueAgile)

nuxt.config.js

export default {
    plugins: ['~/plugins/vue-agile', mode: 'client']
}

要使用没有 SSR 的组件，请使用 client-only 组件：

<client-only placeholder="Loading...">
    <agile>...</agile>
</client-only>

编辑：添加 Shreerang 的建议（下方评论）。

【讨论】：

我收到同样的错误信息。并在我的问题中添加了一张新图片
新屏幕截图中的警告是因为您使用的是 Typescript，我猜 node_module 还没有准备好，但我认为这不是问题。我找到了一个可能的解决方案，其他人报告说，当您更新 Node 版本但之后不更新 node_modules 时可能会发生这种情况，所以也许您可以在 Nuxt 根文件夹中尝试：rm -rf node_modules && npm install。让我知道它是否有帮助，这听起来很神奇，我知道哈哈。
不，还是一样，而且不只是这个模块，甚至是我以前用过的那个模块也给我同样的错误

【解决方案2】：

Sergio 的上述回答大部分是准确的，但需要一点时间。

nuxt.config.json 配置需要以下更新。不需要build 配置。

plugins: [
    { src: '~/plugins/vue-agile', mode: 'client' }
]

【讨论】：

当然，错误似乎出在服务器端，我更改了答案以包含此内容。谢谢！

【解决方案3】：

在你的脚本标签中添加type="module"

<script type="module">
import { VueAgile } from "vue-agile";
export default {
  name: "",
  layout: "",
  middleware: [],
  data() {
    return {};
  },
  components: {
    agile: VueAgile,
  },
  
};
</script>

【讨论】：

同样的错误，我想我以前试过。这非常令人沮丧。

【解决方案4】：

您需要标记vue-agile 进行转译，以便在服务器部分 (SSR) 上工作。

nuxt.config.js：

...
  build: {
    transpile: [/vue-agile/]

  }
...

【讨论】：