Reactjs '；汇总插件节点解析'；can'；无法使用react的“useState”，如何修复它？

在typescript项目中，我同时使用

typescript

+

rollup

+

rollup插件节点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：完整的代码演示在这里：

作为@Tholle提供的答案链接，问题是rollup插件commonjs无法从react中找到

设置状态

导出，因为react声明如下：

const React = {
    setState
}
module.exports = React

rollup插件commonjs无法处理这种形式的导出，因此我们必须在rollup.config.js中定义一些命名的导出，如：

plugins: [
   'react': ['useState']
]

---

作为@Tholle提供的答案链接，问题是rollup插件commonjs无法从react中找到

setState

导出，因为react声明如下：

const React = {
    setState
}
module.exports = React

rollup插件commonjs无法处理这种形式的导出，因此我们必须在rollup.config.js中定义一些命名的导出，如：

plugins: [
   'react': ['useState']
]

---

这个设置配置适合我

// rollup config 
plugins: [
   commonjs({
      // ... other commonjs config options
      namedExports: {
         // https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
         'node_modules/react/index.js': ['useState', 'useRef', 'useEffect'],
       },
     }),
],

---

这个设置配置适合我

// rollup config 
plugins: [
   commonjs({
      // ... other commonjs config options
      namedExports: {
         // https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
         'node_modules/react/index.js': ['useState', 'useRef', 'useEffect'],
       },
     }),
],

---

我发现我需要在我的package.json中添加peerDependencies：

"peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

---

我发现我需要在我的package.json中添加peerDependencies：

"peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

---

我不确定出了什么问题，但您是否尝试过手动定义导出以查看其是否有效？作为临时修复，您只能导入

React

并使用

React。useState

不确定此处的依赖项，但看起来您的

React

和

@types/React

不同步。可能是吗？@Thole你是对的，我必须为

useState

定义一个

namedExports

，我不确定出了什么问题，但是你是否尝试过手动定义导出以查看它是否有效？作为临时修复，你只能导入

React

并使用

React.useState

不确定这里的依赖关系，但是看起来您的

react

和

@types/react

不同步。是吗？@Thole你说得对，我必须为

useState

插件定义一个
namedExports
，['react'：['useState']]]

不起作用，它甚至不是有效的JS语法

插件：['react'：['useState']]]

不起作用，它甚至不是有效的JS语法