Nuxt 3：安装vue 3-spinner(错误：ES模块范围中未定义require)

wyyhbhjk 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(221)

在我的nuxt3应用程序中，我正在尝试安装vue3-spinner包。下面是我的实现：

// file: @/plugins/vue3-spinner.js
import vue3Spinner from 'vue3-spinner'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vue3Spinner)
})

// file: @/components/MyComponent.vue
<script setup>
import { DotLoader } from "vue3-spinner"
console.log(DotLoader)
</script>

**问题：**我得到这个500错误：

require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and '/Users/me/projects/my-nuxt-app/node_modules/vue3-spinner/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

我做错了什么？

vue.js

来源：https://stackoverflow.com/questions/76214415/nuxt3-installing-vue3-spinner-error-require-is-not-defined-in-es-module-scope

1条答案

按热度按时间

yftpprvb1#

您需要确保此插件仅在客户端运行。否则，你会得到一个错误。

<script setup>
import { DotLoader } from "vue3-spinner"
</script>
<template>
  <div>
    <ClientOnly>
      <DotLoader />
    </ClientOnly>
  </div>
</template>
<style scoped lang="css"></style>

~/plugins/spinner.client.js

import vue3Spinner from 'vue3-spinner'

export default defineNuxtPlugin( ( nuxtApp ) => {
    nuxtApp.vueApp.use( vue3Spinner )
} )

我在这里创建了一个示例demo。https://stackblitz.com/edit/nuxt-starter-qfccjy?file=plugins/spinner.client.js
希望对你有帮助。

赞(0）回复(0）举报 2023-05-18

我来回答

Nuxt 3：安装vue 3-spinner(错误：ES模块范围中未定义require)

1条答案

相关问题

热门标签

最新问答