react-scripts 5 未能正确捆绑子依赖关系

问题描述 投票:0回答:1

我有一个与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 的导出部分吗?

webpack create-react-app react-scripts
1个回答
0
投票

这是由于 create-react-app 中不支持的功能造成的

cjs 文件通过 webpack 作为静态资源而不是代码加载

github 问题中概述了该错误和解决方法:

https://github.com/facebook/create-react-app/issues/11889

© www.soinside.com 2019 - 2024. All rights reserved.