在 typescript 项目中,我使用 typescript
+ rollup
+ rollup-plugin-node-resolve
+ React 的 useState
在一起,但是当运行 rollup -c
时,它会抛出错误:
1: import {useState} from "react";
^
2:
Error: 'useState' is not exported by node_modules/react/index.js
我的代码非常简单:
import {useState} from "react";
console.log(useState);
rollup.config.js
是:
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
export default {
input: 'index.ts',
output: [
{
file: 'bundle.js',
format: 'cjs',
}
],
plugins: [
resolve(),
commonjs(),
typescript(),
]
};
package.json 是:
{
"scripts": {
"demo": "rollup -c && node bundle.js"
},
"dependencies": {
"react": "16.8.4"
},
"devDependencies": {
"@types/react": "16.8.8",
"rollup": "1.6.0",
"rollup-plugin-commonjs": "9.2.1",
"rollup-plugin-node-resolve": "4.0.1",
"rollup-plugin-typescript2": "0.20.1",
"typescript": "3.3.3333"
}
}
tsconfig.json:
{
"compilerOptions": {
"strict": true,
"target": "es6",
"module": "esnext",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"moduleResolution": "node",
"sourceMap": true,
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}
如果我从 rollup.config.js
中删除 resolve()
,rollup 将正确捆绑它。但我需要在我的实际项目中使用 resolve()
。
问题出在哪里,如何解决?
PS:完整的代码演示在这里:https://github.com/freewind-demos/typescript-react-rollup-use-state-demo
最佳答案
正如@Tholle提供的答案链接,问题是rollup-plugin-commonjs无法找到react的setState
导出,因为react声明如下:
const React = {
setState
}
module.exports = React
rollup-plugin-commonjs 无法处理这种形式的导出,因此我们必须在 rollup.config.js 中定义一些命名导出,例如:
plugins: [
'react': ['useState']
]
关于reactjs - ‘rollup-plugin-node-resolve’无法与react的 `useState`一起使用,如何修复它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55179221/