Giter VIP home page Giter VIP logo

Comments (8)

wiidede avatar wiidede commented on July 17, 2024 1

https://github.com/wiidede/arco-design-nuxt-module/blob/main/package.json#L33-L35

@arco-design/web-vue 这个依赖是要你自己安装的,你的package.json里面没有这个依赖。我试了一下,装了应该就没这个问题

from arco-design-nuxt-module.

wiidede avatar wiidede commented on July 17, 2024

请提供最小复现

from arco-design-nuxt-module.

cgangit avatar cgangit commented on July 17, 2024

package.json

{
...
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxt/eslint": "^0.3.10",
    "@nuxt/eslint-config": "^0.3.10",
    "@nuxtjs/i18n": "^8.3.1",
    "@nuxtjs/sitemap": "^5.1.5",
    "@pinia/nuxt": "^0.5.1",
    "@unocss/nuxt": "^0.60.0",
    "arco-design-nuxt-module": "^0.1.0",
    "eslint": "^9.2.0",
    "nuxt-lodash": "^2.5.3",
    "nuxt-swiper": "2.0.0-1",
    "sass": "^1.77.0",
    "unocss": "^0.60.0",
    "vue-tsc": "^2.0.16"
  },
...
}

nuxt.config.ts

export default defineNuxtConfig({
...
arco: {
    imports: ['Notification', 'Message']
},
...
})

pages/index.vue

<script setup lang="ts">
const onSubmit = () => {
    Message.success('成功')
}
</script>

dev模式下会报错,但是build后运行不会报错

from arco-design-nuxt-module.

wiidede avatar wiidede commented on July 17, 2024

复现不了,我使用这个配置是正常的

arco: {
    imports: ['Notification', 'Message']
}

from arco-design-nuxt-module.

cgangit avatar cgangit commented on July 17, 2024

我新建了一个空白nuxt工程只安装arco-design-nuxt-module模块,依旧报错:
package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "arco-design-nuxt-module": "^0.1.0",
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "packageManager": "[email protected]+sha512.67f5879916a9293e5cf059c23853d571beaf4f753c707f40cb22bed5fb1578c6aad3b6c4107ccb3ba0b35be003eb621a16471ac836c87beb53f9d54bb4612724"
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["arco-design-nuxt-module"],
  arco: {
    imports: ["Message", "Notification"],
  },
});

app.vue

<template>
  <div>
    <button @click="onClick">test</button>
  </div>
</template>
<script setup lang="ts">
const onClick = () => {
  Message.success("test");
};
</script>

image
搜了一下是,上游@arco-design/web-vue引入的dayjs版本不支持esm造成的,官方似乎一直没修复。

from arco-design-nuxt-module.

cgangit avatar cgangit commented on July 17, 2024

https://github.com/wiidede/arco-design-nuxt-module/blob/main/package.json#L33-L35

@arco-design/web-vue 这个依赖是要你自己安装的,你的package.json里面没有这个依赖。我试了一下,装了应该就没这
个问题

确实是这个问题,没注意看文档。但奇怪的是为什么之前我没有安装@arco-design/web-vue,但arco-design的组件却能正常使用?

from arco-design-nuxt-module.

wiidede avatar wiidede commented on July 17, 2024

https://pnpm.io/npmrc#auto-install-peers

pnpm默认自动安装peer dependencies

from arco-design-nuxt-module.

cgangit avatar cgangit commented on July 17, 2024

https://pnpm.io/npmrc#auto-install-peers

pnpm默认自动安装peer dependencies

感谢解答

from arco-design-nuxt-module.

Related Issues (9)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.