[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fBDMOWbhWQcTlJ3ojrzzBjfD3gMqFEyRK-a8Fji_GOng":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},173,"2025-11-21T03:26:49.909Z","taro中将vite构建修改为webpack构建","这篇文章记录我在开发小程序过程中遇到的问题和解决方案，希望对一些同学有帮助。问题是taro的4.1.7或4.1.8版本编译为支付宝小程序时遇到的问题。\n\n## 问题\n> node_modules/lottie-web/build/player/lottie.js (14422:32) Use of eval in \"node_modules/lottie-web/build/player/lottie.js\" is strongly discouraged as it poses security risks and may cause issues with minification.\nnode_modules/@nutui/lottie-miniprogram/miniprogram_dist/index.js (9:157644) Use of eval in \"node_modules/@nutui/lottie-miniprogram/miniprogram_dist/index.js\" is strongly discouraged as it poses security risks and may cause issues with minification.\nnode_modules/@nutui/lottie-miniprogram/miniprogram_dist/index.js (9:157715) Use of eval in \"node_modules/@nutui/lottie-miniprogram/miniprogram_dist/index.js\" is strongly discouraged as it poses security risks and may cause issues with minification.\n✓ 1126 modules transformed.\n/Users/xxx/node_modules/@tarojs/vite-runner/dist/mini/emit.js:188\n                                    if (chunk.type === 'asset') {\n                                              ^\n> TypeError: Cannot read properties of undefined (reading 'type')\n    at Object.set (/Users/xxx/node_modules/@tarojs/vite-runner/src/mini/emit.ts:191:25)\n    at Object.fn (/Users/xxx/node_modules/@tarojs/plugin-platform-alipay/src/program.ts:121:32)\n    at Kernel.\u003Canonymous> (/Users/xxx/node_modules/@tarojs/service/src/Kernel.ts:307:34)\n    at Generator.next (\u003Canonymous>)\n    at /Users/xxx/node_modules/@tarojs/service/dist/Kernel.js:8:71\n    at new Promise (\u003Canonymous>)\n    at __awaiter (/Users/xxx/node_modules/@tarojs/service/dist/Kernel.js:4:12)\n    at /Users/xxx/node_modules/@tarojs/service/src/Kernel.ts:306:24\n    at _next0 (eval at create (/Users/xxx/node_modules/tapable/lib/HookCodeFactory.js:71:10), \u003Canonymous>:17:17)\n    at eval (eval at create (/Users/xxx/node_modules/tapable/lib/HookCodeFactory.js:71:10), \u003Canonymous>:41:1)\nNode.js v22.19.0\n\n问题截图：\n![taro vite error](https://image.xinwei.ltd/image1763629138230.png)\n\n这个问题其实很多人都有在碰到，主要是由于taro新版本出的bug，那我们要做的其实无外乎2种方式，要么回退taro的cli和依赖版本到之前的一个正常版本，或者将vite改为webpack的编译配置。\n\n## 解决方案\n我倾向于保持taro cli的最新版本，然后将vite构建改为webpack构建，所以接下来我要记录的是如何将我的工程改为webpack构建的过程。\n\n我当前的taro环境：\n```terminal\n👽 Taro v4.1.7\n\n  Taro CLI 4.1.7 environment info:\n    System:\n      OS: macOS 26.1\n      Shell: 5.9 - /bin/zsh\n    Binaries:\n      Node: 22.19.0 - /Users/xxx/.nvm/versions/node/v22.19.0/bin/node\n      Yarn: 1.22.22 - /Users/xxx/.nvm/versions/node/v22.19.0/bin/yarn\n      npm: 10.9.3 - /Users/xxx/.nvm/versions/node/v22.19.0/bin/npm\n    npmPackages:\n      @tarojs/cli: 4.1.7 => 4.1.7 \n      @tarojs/components: 4.1.7 => 4.1.7 \n      @tarojs/helper: 4.1.7 => 4.1.7 \n      @tarojs/plugin-framework-react: 4.1.7 => 4.1.7 \n      @tarojs/plugin-html: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-alipay: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-h5: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-harmony-hybrid: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-jd: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-qq: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-swan: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-tt: 4.1.7 => 4.1.7 \n      @tarojs/plugin-platform-weapp: 4.1.7 => 4.1.7 \n      @tarojs/react: 4.1.7 => 4.1.7 \n      @tarojs/runtime: 4.1.7 => 4.1.7 \n      @tarojs/shared: 4.1.7 => 4.1.7 \n      @tarojs/taro: 4.1.7 => 4.1.7 \n      @tarojs/vite-runner: 4.1.7 => 4.1.7 \n      babel-preset-taro: 4.1.7 => 4.1.7 \n      eslint-config-taro: 4.1.7 => 4.1.7 \n      react: ^18.0.0 => 18.3.1 \n```\n\n### 1. 升级taro cli到最新版本\n使用以下命令\n```terminal\ntaro update self 4.1.8\n```\n\n### 2. 升级工程project的taro配置\n使用以下终端命令\n```terminal\ntaro update project 4.1.8\n```\n我在升级的时候遇到问题：\n```terminal error\n⚠ npm error code ERESOLVE\n⚠ npm error ERESOLVE could not resolve\nnpm error\nnpm error While resolving: xxx-mini@1.0.0\nnpm error Found: @tarojs/plugin-framework-react@4.1.7\nnpm error node_modules/@tarojs/plugin-framework-react\nnpm error   @tarojs/plugin-framework-react@\"4.1.8\" from the root project\nnpm error\nnpm error Could not resolve dependency:\nnpm error @tarojs/plugin-framework-react@\"4.1.8\" from the root project\nnpm error\nnpm error Conflicting peer dependency: @tarojs/shared@4.1.8\nnpm error node_modules/@tarojs/shared\nnpm error   peer @tarojs/shared@\"4.1.8\" from @tarojs/plugin-framework-react@4.1.8\nnpm error   node_modules/@tarojs/plugin-framework-react\nnpm error     @tarojs/plugin-framework-react@\"4.1.8\" from the root project\nnpm error\nnpm error Fix the upstream dependency conflict, or retry\nnpm error this command with --force or --legacy-peer-deps\nnpm error to accept an incorrect (and potentially broken) dependency resolution.\nnpm error\nnpm error\nnpm error For a full report see:\nnpm error /Users/xxx/.npm/_logs/2025-11-20T09_07_03_753Z-eresolve-report.txt\n⚠ npm error A complete log of this run can be found in: /Users/xxx/.npm/_logs/2025-11-20T09_07_03_753Z-debug-0.log\n```\n\n从上面的报错中看出错误在：`@tarojs/plugin-framework-react@4.1.7`和当前project配置（taro 4.1.8）不匹配，所以检查一下`package.json`中`@tarojs/plugin-framework-react`是否是4.1.8，发现`package.json`中的配置均以被修改为4.1.8了，那么问题就是出在没有删掉的`package-lock.json`和`node_modules`。\n\n所以删除`package-lock.json`和`node_modules`后，重新`npm install`。\n\n### 3. 将vite修改为webpack编译配置\n首先要将`package.json`文件中的一些vite等依赖去掉，\n比如（如果有的话）：\n```依赖项\n...\n    \"@vitejs/plugin-react\": \"^4.3.0\",\n    \"@tarojs/vite-runner\": \"4.1.8\",\n    \"vite\": \"^4.2.0\",\n    \"vite-plugin-importer\": \"^0.2.5\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n...\n```\n\n然后确保引入依赖：\n```新依赖\n@tarojs/webpack5-runner\n```\n\n### 4. 将config/index.ts中的vite构建改为webpack\n将`defineConfig`的配置从vite改为webpack5。\n比如：\n```config/index.ts\n...\nexport default defineConfig\u003C\"vite\">(async (merge, { command, mode }) => {\n  const baseConfig: UserConfigExport\u003C\"vite\"> = {\n...\n     compiler: {\n        type: \"vite\",\n...\n```\n改为:\n```config/index.ts\n...\nexport default defineConfig\u003C\"webpack5\">(async (merge, { command, mode }) => {\n  const baseConfig: UserConfigExport\u003C\"webpack5\"> = {\n...\n     compiler: {\n        type: \"webpack5\",\n...\n```\n\n### 5. 修改babel.config.js中的构建配置\n修改前：\n```babel.config.js\n// babel-preset-taro 更多选项和默认值：\n// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md\nmodule.exports = {\n  presets: [\n    [\n      \"taro\",\n      {\n        framework: \"react\",\n        ts: true,\n        compiler: \"vite\",\n      },\n    ],\n  ],\n  // plugins: [], // 彻底清空插件，避免任何 Babel 导入插件干扰\n};\n\n```\n修改后：\n```babel.config.js\n// babel-preset-taro 更多选项和默认值：\n// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md\nmodule.exports = {\n  presets: [\n    [\n      \"taro\",\n      {\n        framework: \"react\",\n        ts: true,\n        compiler: \"webpack5\",\n      },\n    ],\n  ],\n  // plugins: [], // 彻底清空插件，避免任何 Babel 导入插件干扰\n};\n\n```\n\n然后，同样删除掉`package-lock.json`和`node_modules`，然后`npm install`。\n\n### 6. 运行npm run dev:weapp报错\n```部分报错\n...\n Webpack\n  Compiled with some errors in 7.41s\n\n✖ Errors: \n\nresolve '@/utils/dl_util' in '/Users/xxx/src/pages/dt_play'\n  Parsed request is a module\n  using description file: /Users/xxx/package.json (relative path: ./src/pages/dt_play)\n    Field 'browser' doesn't contain a valid alias configuration\n    resolve as module\n      /Users/xxx/src/pages/dt_play/node_modules doesn't exist or is not a directory\n      /Users/xxx/src/pages/node_modules doesn't exist or is not a directory\n      /Users/xxx/src/node_modules doesn't exist or is not a directory\n      looking for modules in /Users/xxx/node_modules\n        /Users/xxx/node_modules/@/utils doesn't exist\n...\n```\n\n从报错可以看出，是由于我之前在vite构建那个时候配置过路径别名，但是改为webpack后别名没有识别。\n\n### 7. 解决别名问题\n- 需要引入dev依赖：`tsconfig-paths-webpack-plugin`，安装这个依赖。\n- 回到config/index.ts配置文件，去使用这个插件\n```config/index.ts\n...\nimport TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'\n...\nmini {\n...\n      webpackChain(chain) {\n        // 这里定义 webpack 配置\n        chain.resolve.plugin(\"tsconfig-paths\").use(TsconfigPathsPlugin);\n      },\n...\n},\n...\nh5: {\n...\n      webpackChain(chain) {\n        chain.resolve.plugin(\"tsconfig-paths\").use(TsconfigPathsPlugin);\n      },\n...\n}\n...\n```\n\n### 8. 重新运行\n运行就OK了。\n\n\n\n以上就是所有了，欢迎大家一起讨论细节.\n\n","这篇文章记录我在开发小程序过程中遇到的问题和解决方案，希望对一些同学有帮助。问题是taro的4.1.7或4.1.8版本编译为支付宝小程序时遇到的问题。","https://image.xinwei.ltd/image1763629138230.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",13,{"id":24,"name":26,"parentId":21},"小程序",[],"",36,0,"taro alipay, taro vite, taro, vite, vite-runner, chunk.type, vite-runner/dist/mini/emit.js:188"]