Nuxt3: установка vue3-spinner (ошибка: требование не определено в области модуля ES)

В моем приложении 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.info(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 nuxt.js vuejs3 es6-modules nuxt3

10.05.2023 03:53

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны убедиться, что этот плагин работает только на стороне клиента. В противном случае вы получите ошибку.

<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 )
} )

Я создал демонстрационный пример здесь. https://stackblitz.com/edit/nuxt-starter-qfccjy?file=plugins/spinner.client.js

Надеюсь, это поможет вам.

10.05.2023 04:07

Другие вопросы по теме

Отсутствуют файлы Javascript при развертывании приложения Nuxt в Google App Engine

Nuxt 3 CreateError не показывает параметр «причина». Сторона сервера

Vue/Nuxt 3 — невозможно установить свойства null (настройка textContent)

Nuxt3: как правильно настроить CKEditor 5

Компоненты Nuxt 3 внезапно не определены

Nuxt 3 Как внедрить CORS?

Nuxt 3 Запретить другим веб-сайтам, приложениям или доменам доступ к моим API?

Nuxt3 SSR несколько маршрутов на файл? Универсальные маршруты сервера

Как получить statusCode из useError в TypeScript в Nuxt

Nuxt 3 SSR выполняет XHR на стороне клиента, а не на стороне сервера

Nuxt3: установка vue3-spinner (ошибка: требование не определено в области модуля ES)

Ответы 1

Другие вопросы по теме

Похожие вопросы