使用 vite 打包出错

Yanren1225 commented 2 years ago

TuSimple/naive-ui version (版本)

2.26.0

Vue version (Vue 版本)

3.2.31

Browser and its version (浏览器及其版本)

Firefox 97.0.1

System and its version (系统及其版本)

macOS 12.2

Node version (Node 版本)

16.14.0

Reappearance link (重现链接)

https://github.com/MetaplasiaTeam/castable-nft-web

Reappearance steps (重现步骤)

yarn build && yarn preview

Expected results (期望的结果)

正常显示界面

Actual results (实际的结果)

Uncaught ReferenceError: exports is not defined

这个报错是在 lodash-es 上面，我使用 yarn 查询发现只有这个 UI 库依赖了

$ yarn why lodash-es
yarn why v1.22.17
warning ../package.json: No license field
[1/4] 🤔  Why do we have the module "lodash-es"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "lodash-es@4.17.21"
info Reasons this module exists
   - "naive-ui" depends on it
   - Hoisted from "naive-ui#lodash-es"
info Disk size without dependencies: "2.59MB"
info Disk size with unique dependencies: "2.59MB"
info Disk size with transitive dependencies: "2.59MB"
info Number of shared dependencies: 0
✨  Done in 0.57s.

我有开启转换 es 模块的选项，如下

commonjsOptions: {
      transformMixedEsModules: true,
      // exclude: [
      //   'node_modules/lodash-es/**',
      // ],
    },

因为我要使用一部分 web3 的东西，所以需要开启，参看 Failed to serve on production: Uncaught ReferenceError: require is not defined #20 ，可以看到配置有注释，我尝试排除这个模块的转换也没有用。我想知道我应该如何配置，或者放弃 vite。

Remarks (补充说明)

exports is not defined #7128 这里有 debug 日志

Talljack commented 2 years ago

当我把vue-dapp和ethers依赖干掉之后是可用的，或许你应该看看这两个依赖的问题

Yanren1225 commented 2 years ago

当我把 vue-dapp 和 ethers 依赖干掉之后是可用的，或许你应该看看这两个依赖的问题

好的，我稍后看看有没有其他可以用的，感谢

Yanren1225 commented 2 years ago

当我把 vue-dapp 和 ethers 依赖干掉之后是可用的，或许你应该看看这两个依赖的问题

我用他给的示例是可以直接运行的，我想是不是 UI 库和 web3 的东西冲突了

Talljack commented 2 years ago

当我把 vue-dapp 和 ethers 依赖干掉之后是可用的，或许你应该看看这两个依赖的问题

我用他给的示例是可以直接运行的，我想是不是 UI 库和 web3 的东西冲突了

不确定我对这个东西不熟，我按照官方说明安装也跑不起来demo，或者你把你那个能跑的实例给我看看

Yanren1225 commented 2 years ago

https://github.com/chnejohnson/vue3-dapp-starter 是这个，我可以跑起来，这里面启用了 transformMixedEsModules

Yanren1225 commented 2 years ago

当我把 vue-dapp 和 ethers 依赖干掉之后是可用的，或许你应该看看这两个依赖的问题

我用他给的示例是可以直接运行的，我想是不是 UI 库和 web3 的东西冲突了

不确定我对这个东西不熟，我按照官方说明安装也跑不起来 demo，或者你把你那个能跑的实例给我看看

他的 package.json 是这样的

{
  "name": "vue3-dapp-starter",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "buffer": "^6.0.3",
    "ethers": "^5.5.2",
    "process": "^0.11.10",
    "util": "^0.12.4",
    "vue": "^3.2.16",
    "vue-dapp": "^0.4.6",
    "vue-router": "4"
  },
  "devDependencies": {
    "@rollup/plugin-inject": "^4.0.3",
    "@vitejs/plugin-vue": "^1.9.2",
    "typescript": "^4.4.3",
    "vite": "^2.6.0",
    "vite-plugin-windicss": "^1.4.8",
    "windicss": "^3.1.8"
  }
}

superchangme commented 2 years ago

有解决方案吗，我这边也是报错Uncaught ReferenceError: exports is not defined

mailbaoer commented 2 years ago

也遇到了这个问题，我是这么解决的，具体是在上面回答的transformMixedEsModules之外排除 lodash-es，完整的 build 配置

build: {
    rollupOptions: {
      plugins: [nodePolyfills()]
    },
    commonjsOptions: {
      transformMixedEsModules: true,
      exclude: [
        'node_modules/lodash-es/**',
        'node_modules/@types/lodash-es/**',
      ],
    },
  }

以上路径是针对 yarn 的，其他的路径可能不同

tusen-ai / naive-ui