ASP.NET Core+React+Webpack5中useState导入使用报错的解决方法

问题分析 #

你遇到的Invalid hook call和Cannot read properties of null (reading 'useState')错误，本质是直接导入的useState无法正确关联到React实例，而通过React.useState能正常运行，说明React本身是存在的，但模块导入或项目配置存在问题。

解决方案 #

1. 修复缺失的ReactDOM导入 #

你的代码中使用了ReactDOM.render但未导入ReactDOM，这会导致全局变量依赖或未定义问题，先补充导入：

import { useState } from "react";
import ReactDOM from "react-dom"; // 新增这行

function App() {
    const [value, setValue] = useState(10);

    return (
        <div className="app">
            { value }
        </div>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

2. 移除重复的React实例 #

多个React实例共存会导致钩子调用失败，执行以下步骤排查：

• 运行npm ls react查看依赖树，确认是否存在多个React版本
• 如果有重复，删除node_modules和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）

3. 配置Webpack强制使用单一React实例 #

在webpack.config.js中添加resolve.alias，强制Webpack使用同一个React包：

const path = require('path');

module.exports = {
  // ...其他配置项
  resolve: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
    }
  }
};

4. 确认Babel配置正确 #

如果你使用Babel编译JSX，确保@babel/preset-react配置正确，推荐启用自动运行时优化导入逻辑：
在.babelrc或babel.config.json中：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

启用runtime: "automatic"后，你无需在组件文件中导入React就能使用JSX，但钩子仍需按需导入（如import { useState } from 'react'）。

验证 #

完成上述配置后，重启Webpack开发服务器，检查控制台是否还有错误，此时直接使用useState应该能正常运行。

内容的提问来源于stack exchange，提问作者Alkamal