文章/答案/技术大牛

发布

社区首页 >问答首页 >DevExtreme在构建过程中Nuxt3失败

问DevExtreme在构建过程中Nuxt3失败
EN

Stack Overflow用户

提问于 2022-09-05 06:39:02

回答 1查看 44关注 0票数 0

我正在尝试将DevExtreme UI组件包含到Nuxt 3项目中。我使用了通过npx nuxi init nuxt-app生成的基本npx nuxi init nuxt-app应用程序，并开始弯曲它。

这是我的带有非常基本的DevExtreme菜单的测试组件：

<template>
  <div id="container">
    <dxMenu>
        <dxItem icon="home" />
        <dxItem text="O aplikaci" />
        <dxItem icon="key" />
    </dxMenu>
  </div>
</template>

<script lang="ts">
  import DxMenu, { DxItem } from 'devextreme-vue/menu.js';
  import { defineComponent } from 'vue'
 
  export default defineComponent({
    components: {
        DxMenu, DxItem
    }
  })
</script>

然后，我只在我的app.vue中呈现组件。我没有其他与此相关的配置(除了通过DevExtreme导入nuxt.config.ts文件)。

我的nuxt.config.ts看起来就像这样：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css : [
        '@/assets/css/dx.generic.zdd-scheme.css'
    ]
})

我在开发环境方面相当成功--运行npm run dev就像魅力一样。但是当我尝试npm run build时，它总是失败的。

输出如下所示：

i Client built in 11430ms                                                13:38:43
i Building server...                                                     13:38:43
√ Server built in 4482ms                                                 13:38:47
√ Generated public .output/public                                  nitro 13:38:47
start Building server...                                           nitro 13:38:47

ERROR  Rollup error: Error: Cannot find module devextreme/ui/menu imported from file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules, file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nuxt/node_modules, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nitropack/node_modules, file:///C:/ATOS_Projekty/ZDD/web-ui/app/, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/_index.js, file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nuxt/, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/nuxt/node_modules/_index.js, file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nuxt/node_modules, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nitropack/, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/nitropack/node_modules/_index.js, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/nitropack/node_modules


ERROR  Error: Cannot find module devextreme/ui/menu imported from file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nuxt/node_modules, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/nitropack/node_modules, file:///C:/ATOS_Projekty/ZDD/web-ui/app/, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/_index.js, file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/nuxt/, file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nuxt/node_modules/_index.js, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nuxt/node_modules, file:///C:/ATOS_Projekty/ZDD/web- 
ui/app/node_modules/nitropack/, file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nitropack/node_modules/_index.js, 
file:///C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nitropack/node_modules

at resolvePath (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/mlly/dist/index.mjs:1079:10)
at _resolve (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nitropack/dist/shared/nitro.8d0213e3.mjs:304:22)
at Object.resolveId (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/nitropack/dist/shared/nitro.8d0213e3.mjs:348:34)
at async resolveId (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/rollup/dist/es/shared/rollup.js:21737:26)
at async ModuleLoader.resolveId (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/rollup/dist/es/shared/rollup.js:22037:19)
at async /C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/@rollup/plugin-commonjs/dist/es/index.js:773:14
at async Promise.all (index 0)
at async /C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/@rollup/plugin-commonjs/dist/es/index.js:765:30
at async rewriteRequireExpressionsAndGetImportBlock (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/@rollup/plugin-commonjs/dist/es/index.js:1312:28)
at async transformCommonjs (/C:/ATOS_Projekty/ZDD/web-ui/app/node_modules/@rollup/plugin-commonjs/dist/es/index.js:1874:23)`

devextreme-vue/menu是从devextreme/ui/menu导入的，但是看起来这个模块在构建过程中并没有被传递。

我是否必须在代码中的某个地方声明依赖项，才能通知构建服务器使用它？我已经尝试过各种各样的东西(比如试图说服维特(卷起来)不要做摇树动作或者改用Webpack )，但结果总是一样。但也许我只是做错了，我仍然需要了解很多事情是如何在这里运作的。任何帮助/线索都将不胜感激。

这是我的package.json，以防我在那里更改或安装一些东西。

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "start": "nuxt start"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.8"
  },
  "dependencies": {
    "devextreme": "22.1.4",
    "devextreme-vue": "22.1.4"
  }
}

编辑:我的节点是16.17.0和npm 8.19.0，也许版本是相关的.

javascript

vue.js

nuxt.js

devextreme

nuxtjs3

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-06 11:25:01

因此，工作解决方案似乎是在向/plugins文件夹中添加一个插件，在我的例子中名为dx.client.ts，但这并不重要，该文件夹导入所有必要的组件，并使它们在应用程序中全局可用：

import { DxButton } from "devextreme-vue/button";
import { DxMenu, DxItem } from 'devextreme-vue/menu';
// the list goes on as the app grows

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp
      .component("DxButton", DxButton)
      .component("DxMenu", DxMenu)
      .component("DxItem", DxItem);

      // the list goes on as the app grows 

});

我还要补充一句：

ssr: false

选项进入nuxt.config.ts，否则在构建过程中我会收到Entry module cannot be external (devextreme-vue).错误消息。

因此，它有一些限制，但到目前为止，它是有效的。

编辑:事实证明，虽然它对一些DevExtreme组件运行良好，无需进一步调整，但一些组件(如DxForm)也需要在Vite构建过程中禁用树抖动--参见怎么做？。否则，在生成过程中丢失必要的文件，在呈现组件时出现模糊的运行时错误TypeError: f(...)[t] is not a function。

谢谢Stefan (速记)给出的正确答案，这里

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73605387

复制

相似问题

问DevExtreme在构建过程中Nuxt3失败
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DevExtreme在构建过程中Nuxt3失败EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DevExtreme在构建过程中Nuxt3失败
EN