添加@unocss/webpack依赖后会导致uni-app直接启动报错

添加@unocss/webpack依赖后会导致uni-app直接启动报错

操作步骤：

  • 使用命令行创建项目
    vue create -p dcloudio/uni-preset-vue my-project
    选择默认模板
  • 添加@unocss/webpack依赖
    pnpm add [@unocss](/user/unocss)/webpack -D
  • 启动项目
    pnpm serve

预期结果：

成功启动项目

实际结果：

启动报错，提示：

ERROR  TypeError: Cannot convert undefined or null to object  
TypeError: Cannot convert undefined or null to object  
    at Function.assign (<anonymous>)  
    at D:\project\uniapp\my-project\node_modules\.pnpm\@dcloudio+vue-cli-plugin-uni@2.0.2-4040520250103001_copy-webpack-plugin@13.0.0_postcss@8.5.3\node_modules\@dcloudio\vue-cli-plugin-uni\lib\chain-webpack.js:53:34  
    at Object.tap (D:\project\uniapp\my-project\node_modules\.pnpm\webpack-chain@6.5.1\node_modules\webpack-chain\src\Use.js:14:20)  
    at D:\project\uniapp\my-project\node_modules\.pnpm\@dcloudio+vue-cli-plugin-uni@2.0.2-4040520250103001_copy-webpack-plugin@13.0.0_postcss@8.5.3\node_modules\@dcloudio\vue-cli-plugin-uni\lib\chain-webpack.js:53:12  
    at Array.forEach (<anonymous>)  
    at D:\project\uniapp\my-project\node_modules\.pnpm\@dcloudio+vue-cli-plugin-uni@2.0.2-4040520250103001_copy-webpack-plugin@13.0.0_postcss@8.5.3\node_modules\@dcloudio\vue-cli-plugin-uni\lib\chain-webpack.js:22:17  
    at D:\project\uniapp\my-project\node_modules\.pnpm\@vue+cli-service@5.0.8_vue-template-compiler@2.6.14_vue@2.6.14\node_modules\@vue\cli-service\lib\Service.js:268:40  
    at Array.forEach (<anonymous>)  
    at Service.resolveChainableWebpackConfig (D:\project\uniapp\my-project\node_modules\.pnpm\@vue+cli-service@5.0.8_vue-template-compiler@2.6.14_vue@2.6.14\node_modules\@vue\cli-service\lib\Service.js:268:26)  
    at Service.resolveWebpackConfig (D:\project\uniapp\my-project\node_modules\.pnpm\@vue+cli-service@5.0.8_vue-template-compiler@2.6.14_vue@2.6.14\node_modules\@vue\cli-service\lib\Service.js:272:48)  
    at PluginAPI.resolveWebpackConfig (D:\project\uniapp\my-project\node_modules\.pnpm\@vue+cli-service@5.0.8_vue-template-compiler@2.6.14_vue@2.6.14\node_modules\@vue\cli-service\lib\PluginAPI.js:132:25)  
    at serve (D:\project\uniapp\my-project\node_modules\.pnpm\@dcloudio+vue-cli-plugin-uni@2.0.2-4040520250103001_copy-webpack-plugin@13.0.0_postcss@8.5.3\node_modules\@dcloudio\vue-cli-plugin-uni\commands\serve.js:51:31)  
    at Service.run (D:\project\uniapp\my-project\node_modules\.pnpm\@vue+cli-service@5.0.8_vue-template-compiler@2.6.14_vue@2.6.14\node_modules\@vue\cli-service\lib\Service.js:262:12)  
    at processTicksAndRejections (node:internal/process/task_queues:96:5)  
 ELIFECYCLE  Command failed with exit code 1.

bug描述：

uni-cli默认模板，一旦安装@unocss/webpack依赖后，就算不使用，也会导致启动报错失败。


更多关于添加@unocss/webpack依赖后会导致uni-app直接启动报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

复现了此问题，应该是 loader 里的配置有缺失，我做个兼容

更多关于添加@unocss/webpack依赖后会导致uni-app直接启动报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个uni-app与@unocss/webpack的兼容性问题。错误发生在webpack配置合并阶段，具体原因是uni-app的webpack配置与@unocss/webpack的配置存在冲突。

解决方法：

  1. 在vue.config.js中添加以下配置：
const UnoCSS = require('[@unocss](/user/unocss)/webpack').default

module.exports = {
  configureWebpack: {
    plugins: [
      UnoCSS(),
    ],
  },
  chainWebpack(config) {
    // 确保uni-app的loader配置优先
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return options
      })
  }
}
  1. 或者使用uni-app官方推荐的unocss方案：
pnpm add unocss [@unocss](/user/unocss)/preset-uno [@unocss](/user/unocss)/preset-attributify -D

然后在main.js中引入：

import 'uno.css'
回到顶部