我有一个与react脚本4一起使用的react组件库。该库依赖于@headlessui/react,因此它位于我的node_modules中,但应用程序不直接需要,仅由组件库需要。
我遇到了这个问题:react-script 4 到 5 迁移问题
当我仔细查看样板react-scripts 5应用程序中的输出包时,我在缩小的源代码中看到了这一点,它应该需要@headlessui/react:
64237: function (e, t, r) {
"use strict";
e.exports = r.p + "static/media/index.439e41c35f66883d8abc.cjs"; <- hmmmm???
},
我可以在构建文件夹中看到确实有一个媒体文件夹,其中包含该文件,它是无头用户界面代码,但它没有将代码放入包中
现在,我发现如果我从 @headlessui/react 的 package.json 中删除这些行,react-scripts 5 将成功捆绑所有内容:
// need to remove all of these
"exports": {
"types": "./dist/index.d.ts",
"require": "./dist/index.cjs",
"import": "./dist/headlessui.esm.js"
},
这让我觉得我可以通过使用 craco 以某种方式更改 webpack 的配置来绕过它,但我不太确定如何
我可以提供 webpack 配置来让 webpack 忽略 package.json 的导出部分吗?
这是由于 create-react-app 中不支持的功能造成的
cjs 文件通过 webpack 作为静态资源而不是代码加载
github 问题中概述了该错误和解决方法: