Typescript库只能为react或为node编译，但不能同时为两者编译

Question

我有一个带有typescript nodejs服务器和typescript react客户端的yarn工作区(使用create react app)。我也有一个通用的typescript库，但无论如何，我似乎无法让它同时为这两种类型编译。

我不是javascript专家。

这是索引。公共项目的t:

export * from "./interfaces/AuthModels"

这是package.json的一部分:

{
"main": "dist/index.js",
"types": "dist/index.d.ts",
}

如果我为普通tsconfig.json设置以下内容，它将为nodejs编译:

{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"moduleResolution": "node",
},
}

但是当运行react应用程序时，我得到以下错误:

Uncaught TypeError: h.keyframes is not a function
at ../../node_modules/react-hot-toast/dist/index.js (error.tsx:3:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ../common/dist/components/Notifications.js (Notifications.js:5:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ../common/dist/index.js (index.js:25:1)
at options.factory (react refresh:6:1)

如果我将以下更改为tsconfig.json，它将编译react，但不是nodejs:

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
},
}

我得到以下错误在nodejs上运行:

export * from "./interfaces/AuthModels";
^^^^^^
SyntaxError: Unexpected token 'export'

Answer 1

您需要排除库中使用node.js中不存在的浏览器api的任何部分，或者在适当的条件检查之后设置访问权限，如下所示:

if (typeof window !== 'undefined') {
// do browser stuff
}

"h。关键帧不是一个函数;

错误是告诉你你包含的东西不兼容node.js。一旦你完成了这些，你就会想把Typescript编译成commonjs模块格式(CJS)。这些可以直接在node.js中运行，因为你使用的是create-react-app，所以你需要Webpack来为浏览器端捆绑它。这将修复您的'意外令牌'export' ';错误。