使用 tsup/esBuild 构建的软件包在 react-scripts 应用程序中找不到"react"

Question

我有一个使用esBuild构建的npm包，我在react-scripts应用程序中使用它。由于volta和npm-link的问题，我正在包上运行构建，并手动复制并粘贴构建文件夹到react-scripts应用程序中的/node_modules。

当我运行我的应用程序时，我在npm包代码Context.js:4 Uncaught TypeError: undefined is not a function中得到一个错误，它没有找到从react导入的createContext。

import { createContext } from 'react';
const EventContext = createContext();

下面是npm包的tsupp .config.js文件:

import { sassPlugin } from '@es-pack/esbuild-sass-plugin';
import { defineConfig } from 'tsup';
export default defineConfig({
entry: ['src/index.js'],
splitting: true,
sourcemap: true,
clean: true,
dts: true,
format: ['esm'],
target: 'es2020',
bundle: true,
esbuildPlugins: [sassPlugin()],
});

这些是我在npm包中的dependencies和peerDependencies

"peerDependencies": {
"classnames": ">=2.0.0 <3.0.0",
"prop-types": ">=15.0.0 <16.0.0",
"react": ">=17.0 <18.0.0",
"react-dom": ">=17.0 <18.0.0"
},
"dependencies": {
"@xstate/react": "^2.0.1",
"focus-trap": "^6.6.1",
"react-share": "^4.4.0",
"xstate": "^4.30.6"
},

在react-scripts构建设置和esBuild包输出之间是否存在问题?我的应用程序已经安装react@17.2.0，并且没有安装我的npm包也可以正常工作。为什么我的npm包代码导入不能反应?

Answer 1

您需要将import React from 'react';添加到使用react的文件的顶部。给他们所有人。