Taro Error: chunk common [mini-css-extract-plugin]

目录

一、问题描述

二、解决方案


一、问题描述

taro项目编译时抛出一下异常:

Error: chunk common [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@nutui/icons-react-taro/dist/style_iconfont.css despite it was not able to fulfill desired ordering with these modules: * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@nutui/nutui-react-taro/dist/esm/Space/style/style.css - couldn't fulfill desired order of chunk group(s) pages/test1/index1 - while fulfilling desired order of chunk group(s) pages/test2/index2

查阅资料后得知:

当前警告是由 mini-css-extract-plugin 这个插件抛出的,该插件主要是将 CSS 样式抽离出来到一个文件内,它的特点是不会重复编译 CSS 文件。所以引起这些警告的原因就是我们在项目中引用组件的时候引用的顺序不同,导致该插件遇到了编译过的 CSS 文件,所以才会抛出警告。

用案例阐述问题形成原因:

javascript 复制代码
import React, {useState} from 'react';
import Taro from "@tarojs/taro";
import {Text, View, Image} from '@tarojs/components';
import {IconFont} from "@nutui/icons-react-taro"; // 1
import {Calendar, Cell, Space, Price} from "@nutui/nutui-react-taro"; // 2

const Index1 = () => {
  return <View>Index1 Page</View>
}
export default Index1
javascript 复制代码
import React, {useState} from 'react';
import Taro from "@tarojs/taro";
import {Text, View, Image} from '@tarojs/components';
import {Calendar, Cell, Space, Price} from "@nutui/nutui-react-taro"; // 1
import {IconFont} from "@nutui/icons-react-taro"; // 2

const Index2 = () => {
  return <View>Index2 Page</View>
}
export default Index2

当前项目在编译 Index1Index2 时就会出现以上错误日志;

二、解决方案

1、将示例中 1、2 两个引用的顺序保持一致即可编译成功。

2、直接修改/config/index.ts的配置:

javascript 复制代码
mini: {
      miniCssExtractPluginOption: {
        ignoreOrder: true
      }
}

加入这个配置项,直接忽略这个检查即可,推荐。

相关推荐
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴4 小时前
Smoothstep
前端·webgl
若梦plus5 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus5 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus5 小时前
微内核&插件化设计思想
前端
柯北(jvxiao)5 小时前
搞前端还有出路吗?如果有,在哪里?
前端·程序人生