如果在React V17中遇到“Cannot find module react\jsx-runtime Do you mean to import react\jsx-runtime.js？”的错误，请尝试以下方法

請問問題。

在NextJs项目中安装包含自制的React组件的npm库并进行next build时，出现了以下错误：Cannot find module ‘project\node_modules\react\jsx-runtime’ imported from project\node_modules\my-library\my-component。您的意思是要导入react/jsx-runtime.js吗？

在Stack Overflow等地也有人提到，对于库和项目之间的版本差异，我以为可以简单地解决，但结果却陷入了一个深深的泥沼中。

首先，我們嘗試了以下方法。
將React升級到最新的18版本的做法並不會對項目產生影響，我們將其排除在外。

@types/reactを最新Verにあげる
ライブラリ側も、Nextjsプロジェクト側も全てVersionを揃えてみましたが、改善しませんでした。プロジェクト側で問題なく@types/reactによるModue resolutionは行えていたので望み薄だったので気にしません。

node_modulesと.lockファイルを削除し、install
lockファイルを削除するという荒業ですが、やるしかありません。package.jsonの各ライブラリVersionを色々と調整しつつ、やっとの思いで試してみましたが、改善しません。

明白这不是一个简单的问题，我意识到了这一点，并做好了各种准备，同时也会自然地产生一些后悔，比如”我根本不应该搞编写库之类的”。我只能从错误信息中寻找线索。

环境。

以下的内容并非完全复制，仅列举了相关的软件包。
值得一提的是，react:17.0.2将使用此处提到的jsx-runtime进行JSX解析。

npmライブラリ
react:17.0.2
typescript:4.4.4

NextJs Project(上記Packageをインストールする)
react:17.0.2
typescript:4.4.4

导致这种情况的因素是什么？

错误发生的原因在于npm库的实际文件，也就是打包后的JavaScript，从这一点可以确定这不是@types相关的问题。

换句话说，实际上应该直接导入react/jsx-runtime这个名称。

在这里，创建npm库时的智慧会派上用场。

在类似于父母/子女的形式下，要实现模块导入，需要在React库的package.json文件中进行以下说明。您需要明确设置路径。

{
    "name":"react",
    ,
    ,
    "exports": {
        "./jsx-runtime":{
            "import": "xxxx",
            "require": "xxx"
        }
    }
}

當查看項目的node_modules/react的package.json時，我們發現沒有exports的內容！

当以这个问题为基础进行搜索时，发现了一个涉及相同问题的议题。

我放下了心中的负担。

应对措施

根据最近的修订，从React的v18版本开始，看起来有一种简单的解决方法，就是将npm库和NextJs项目都升级到最新版本。然而由于各种考虑因素，这并不可行。

因此，我已经对npm库的捆绑进行了如下更改，以便不包含jsx-runtime。这样，React就会变得需要用于JSX解释，所以我还在Component文件中导入了React。

{
  "compilerOptions": {
    ,
    "jsx": "react",

最后

当查看Next.js项目的tsconfig.json文件时，发现”jsx”选项被设置为”preserve”，因此可以确定这一块被正确考虑到了。

补充

还有一种方法是在NextJs项目中解决react/jsx-runtime和react/jsx-runtime.js的关联，但由于不希望对主体项目进行设置相关的修改，我们选择不采用该方法，而是通过引入npm库来解决。