引用nutui vue3 组件编译报错 Error: chunk common [mini-css-extract-plugin] ，调整文件引用顺序这方法就不可用，组件在每个页面引用顺序都不同，官方可有其他可行方案

hisunny520 commented 1 year ago

复现步骤

引用nutui vue3 组件编译报错 Error: chunk common [mini-css-extract-plugin] ，调整文件引用顺序这方法就不可用，组件在每个页面引用顺序都不同，除了不用组件可以，试个多个方法不行，https://github.com/NervJS/taro/issues/7160 上的方法也不行，官方可有其他可行方案

期望结果

可以正常编译

实际结果

编译报错 Error: chunk common [mini-css-extract-plugin]

环境信息

Taro CLI 3.6.6 environment info:
    System:
      OS: Windows 10 10.0.19045
    Binaries:
      Node: 18.16.0 - d:\nodejs\node.EXE
      npm: 9.5.1 - d:\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.6 => 3.6.6 
      @tarojs/components: 3.6.6 => 3.6.6 
      @tarojs/helper: 3.6.6 => 3.6.6 
      @tarojs/plugin-framework-vue3: 3.6.6 => 3.6.6 
      @tarojs/plugin-html: ^3.6.6 => 3.6.6
      @tarojs/plugin-platform-alipay: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-h5: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-jd: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-qq: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-swan: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-tt: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-weapp: 3.6.6 => 3.6.6
      @tarojs/runtime: 3.6.6 => 3.6.6
      @tarojs/shared: 3.6.6 => 3.6.6
      @tarojs/taro: 3.6.6 => 3.6.6
      @tarojs/webpack5-runner: 3.6.6 => 3.6.6
      babel-preset-taro: 3.6.6 => 3.6.6
      eslint-config-taro: 3.6.6 => 3.6.6

yoyo837 commented 1 year ago

报错结果是不是没发完整

hisunny520 commented 1 year ago

相关平台

微信小程序

小程序基础库: 2.32.2 使用框架: Vue 3

复现步骤

引用nutui vue3 组件编译报错 Error: chunk common [mini-css-extract-plugin] ，调整文件引用顺序这方法就不可用，组件在每个页面引用顺序都不同，除了不用组件可以，试个多个方法不行，#7160 上的方法也不行，官方可有其他可行方案

期望结果

可以正常编译

实际结果

编译报错 Error: chunk common [mini-css-extract-plugin]

环境信息
Taro CLI 3.6.6 environment info:
    System:
      OS: Windows 10 10.0.19045
    Binaries:
      Node: 18.16.0 - d:\nodejs\node.EXE
      npm: 9.5.1 - d:\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.6 => 3.6.6 
      @tarojs/components: 3.6.6 => 3.6.6 
      @tarojs/helper: 3.6.6 => 3.6.6 
      @tarojs/plugin-framework-vue3: 3.6.6 => 3.6.6 
      @tarojs/plugin-html: ^3.6.6 => 3.6.6
      @tarojs/plugin-platform-alipay: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-h5: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-jd: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-qq: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-swan: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-tt: 3.6.6 => 3.6.6
      @tarojs/plugin-platform-weapp: 3.6.6 => 3.6.6
      @tarojs/runtime: 3.6.6 => 3.6.6
      @tarojs/shared: 3.6.6 => 3.6.6
      @tarojs/taro: 3.6.6 => 3.6.6
      @tarojs/webpack5-runner: 3.6.6 => 3.6.6
      babel-preset-taro: 3.6.6 => 3.6.6
      eslint-config-taro: 3.6.6 => 3.6.6

 mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true,
    },
    可以消除报错，但是页面组件样式会丢失，不可用
  },

hisunny520 commented 1 year ago

报错结果是不是没发完整

⚠️ Warnings: 

Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/.pnpm/@nutui+nutui-taro@4.0.6_unplugin-vue-components@0.23.0/node_modules/@nutui/nutui-taro/dist/styles/reset.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/.pnpm/@nutui+icons-vue-taro@0.0.9/node_modules/@nutui/icons-vue-taro/dist/style_iconfont.css
   - couldn't fulfill desired order of chunk group(s) subpageA/pages/detail/index, subpageA/pages/tags/index
   - while fulfilling desired order of chunk group(s) pages/index/index, subpageA/pages/send/index, subpageA/pages/city/index
    at Array.forEach (<anonymous>)

Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.4.0_sass@1.50.0_webpack@5.78.0/node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!./node_modules/.pnpm/@nutui+nutui-taro@4.0.6_unplugin-vue-components@0.23.0/node_modules/@nutui/nutui-taro/dist/packages/button/index.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/.pnpm/@nutui+icons-vue-taro@0.0.9/node_modules/@nutui/icons-vue-taro/dist/style_iconfont.css
   - couldn't fulfill desired order of chunk group(s) subpageA/pages/detail/index, subpageA/pages/tags/index
   - while fulfilling desired order of chunk group(s) subpageA/pages/send/index, subpageA/pages/city/index
    at Array.forEach (<anonymous>)

Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.4.0_sass@1.50.0_webpack@5.78.0/node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!./src/subpageA/pages/components/BottomMenu/index.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/.pnpm/@nutui+icons-vue-taro@0.0.9/node_modules/@nutui/icons-vue-taro/dist/style_iconfont.css
   - couldn't fulfill desired order of chunk group(s) subpageA/pages/tags/index
   - while fulfilling desired order of chunk group(s) subpageA/pages/city/index
    at Array.forEach (<anonymous>)

Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.4.0_sass@1.50.0_webpack@5.78.0/node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!./node_modules/.pnpm/@nutui+nutui-taro@4.0.6_unplugin-vue-components@0.23.0/node_modules/@nutui/nutui-taro/dist/packages/badge/index.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/.pnpm/@nutui+icons-vue-taro@0.0.9/node_modules/@nutui/icons-vue-taro/dist/style_iconfont.css
   - couldn't fulfill desired order of chunk group(s) subpageA/pages/tags/index
   - while fulfilling desired order of chunk group(s) pages/index/index
    at Array.forEach (<anonymous>)

Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use[2]!./node_modules/.pnpm/@nutui+icons-vue-taro@0.0.9/node_modules/@nutui/icons-vue-taro/dist/style_iconfont.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/.pnpm/postcss-loader@7.3.0_webpack@5.78.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.4.0_sass@1.50.0_webpack@5.78.0/node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[4]!./node_modules/.pnpm/@nutui+nutui-taro@4.0.6_unplugin-vue-components@0.23.0/node_modules/@nutui/nutui-taro/dist/packages/configprovider/index.scss
   - couldn't fulfill desired order of chunk group(s) pages/index/index, subpageA/pages/send/index
   - while fulfilling desired order of chunk group(s) subpageA/pages/tags/index
    at Array.forEach (<anonymous>)

TheKonka commented 1 year ago

加上这个

hisunny520 commented 1 year ago

@TheKonka 报错的页面可能组件样式会丢失

KevinnZou commented 1 year ago

我也遇到了这个问题

Ttou commented 1 year ago

@eiinu demo仓库

eiinu commented 1 year ago

@eiinu demo仓库

https://github.com/jdf2e/nutui/issues/2461#issuecomment-1655316590

1、NutUI 组件库内的样式依赖顺序以及组件样式之间不存在冲突，即组件样式引入的顺序不会影响最终效果 2、开发者可能会编写出导致样式顺序冲突的代码，这个和代码结构、按需引入插件都有关系，而且很难避开

结论就是：只能开启 ignoreOrder 关掉这个报错。

至于楼主说的开启这个选项后，组件样式会丢失，这个是不符合预期的问题，也没有复现。可能需要楼主提供一下样式丢失的 demo。

SilentFlute commented 1 year ago

我也遇到了这个问题, taro版本3.6.11, nutui版本4.0.4, 也是小程序, 也是用的ignoreOrder这个方式处理的:

 mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true,
    },
  },

然后就不报错了, 项目还在开发中, 暂时没遇到样式丢失的情况

以及没设置之前虽说会报错, 但似乎并不影响开发和打包

ahKevinXy commented 1 year ago

好像循环变量自己写的组件就出现这样的问题

miaomiaoao commented 11 months ago

我也遇到这个问题了。请问如果设置 ignoreOrder: true，在生产环境会遇到什么问题么

miaomiaoao commented 11 months ago

好像循环变量自己写的组件就出现这样的问题

循环变量自己写是什么意思

SilentFlute commented 10 months ago

好像循环变量自己写的组件就出现这样的问题

循环变量自己写是什么意思

ta可能是想说: 循环遍历自己写的组件吧

toFrankie commented 9 months ago

使用分包后就报错了。。。

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[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/components/service-agreement-update-modal/style.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/components/fixed-bottom-with-safe-area/index.scss
   - couldn't fulfill desired order of chunk group(s) subpackage/personal-info/index, subpackage/my-reservation/index, subpackage/my-favorites/index, subpackage/login/index, subpackage/register/index, subpackage/reset-password-phone/index, subpackage/reset-password-email/index
   - while fulfilling desired order of chunk group(s) pages/index/index, pages/user-center/index, pages/performance-guideline/index, pages/location-transportation/index, pages/news-list/index, pages/news/index, pages/activities/index, pages/activity/index, pages/derivative-list/index, pages/derivative/index, pages/restaurant-list/index, pages/restaurant/index, pages/notice-list/index, pages/faq-list/index, pages/reservation/index, pages/service-agreement/index, pages/privacy-policy/index, pages/audience-notice/index, pages/about/index, pages/about-us/index, pages/contact-us/index, pages/about-puydufou/index, pages/coop-brands/index, pages/search/index, pages/questionnaire-list/index, pages/questionnaire/index
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/components/user-control-layout/style.scss
   - couldn't fulfill desired order of chunk group(s) subpackage/personal-info/index, subpackage/my-reservation/index, subpackage/my-favorites/index, subpackage/login/index, subpackage/register/index, subpackage/reset-password-phone/index, subpackage/reset-password-email/index
   - while fulfilling desired order of chunk group(s) pages/index/index, pages/user-center/index, pages/performance-guideline/index, pages/location-transportation/index, pages/news-list/index, pages/news/index, pages/activities/index, pages/activity/index, pages/derivative-list/index, pages/derivative/index, pages/restaurant-list/index, pages/restaurant/index, pages/notice-list/index, pages/faq-list/index, pages/reservation/index, pages/service-agreement/index, pages/privacy-policy/index, pages/audience-notice/index, pages/about/index, pages/about-us/index, pages/contact-us/index, pages/about-puydufou/index, pages/coop-brands/index, pages/search/index, pages/questionnaire-list/index, pages/questionnaire/index
    at Array.forEach (<anonymous>)

jin-benben commented 6 months ago

我也遇到了这个问题

linlinNB commented 6 months ago

可以这么设置，把nutui-vue-icon排除在prebundle这一步，配置一下exclude

compiler: {
    type: 'webpack5',
    prebundle: {
      enable: true,
      exclude: ['@nutui/icons-vue-taro']
    }
  },

linlinNB commented 6 months ago

@jin-benben prebundle可以配置exclude排除掉指定的包

NervJS / taro