React/mini-css-extract-plugin 导入顺序冲突错误：详细构建日志？

发布于 2025-01-10 14:22:08 字数 1511 浏览 0 评论 0原文

我正在开发一个 CRA React 应用程序，最近我遇到了一些来自 mini-css-extract-plugin 的 CSS 导入顺序警告：

chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/RouterLink.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/Error/PageError.module.scss
   - couldn't fulfill desired order of chunk group(s) ,
   - while fulfilling desired order of chunk group(s) , , ,

我知道我可以抑制这些警告，但我想正确修复它们以避免出现奇怪的问题线。但是，我无法获得有关所涉及文件的更多信息。

我对这里发生的情况的理解是，导入这些模块的 TSX 文件在不同的位置以不同的顺序导入。我尝试在导入它们的每个地方重新排列它们，但我认为问题比这更复杂。不过，我真的很想从 mini-css-extract-plugin 获得更多信息，但我不知道如何获得更详细的输出。这可能吗？我已经尝试过 npm run build -- --stats 但在 build/bundle-stats.json 中我看不到更多关于此的信息。

我尝试遵循此线程： https:// github.com/facebook/create-react-app/issues/5372#issuecomment-685932009 但这是一个复杂的应用程序，需要手动跟踪每个问题，如下所示令人生畏并且会非常耗时。我认为对所有文件中的所有导入进行排序是不可行的。我真的只是想要一个指向哪个文件生成冲突的指针。想法？谢谢！

原文

I'm working on a CRA react app and I've recently come across some CSS import order warnings from mini-css-extract-plugin:

chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/RouterLink.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/Error/PageError.module.scss
   - couldn't fulfill desired order of chunk group(s) ,
   - while fulfilling desired order of chunk group(s) , , ,

I know I can suppress these warnings but I want to fix them properly to avoid odd issues down the line. I can't get any more info about the files involved, however.

My understanding of what's happening here is that the TSX files that are importing these modules are being imported in different order in different places. I've tried to rearrange these in every place that they're imported, but I think the problem is more complex than that. I'd really like more information from mini-css-extract-plugin though, and I can't figure out how to get more verbose output. Is this possible? I've tried npm run build -- --stats but there's no more information about this in build/bundle-stats.json that I can see.

I've tried following along with this thread: https://github.com/facebook/create-react-app/issues/5372#issuecomment-685932009 but this is a complex app and manually tracking down every issue like this is intimidating and will be extremely time consuming. I don't think it's feasible to sort all imports in all files. I really just want a pointer to which file generated the conflict. Thoughts? Thanks!

分享到QQ

分享到微博