React实验版use Hook报错：TypeError: use不是函数（Node18环境）

Node.js 18环境下使用React实验版本，尝试用use Hook处理Promise时触发上述错误，怀疑和Webpack配置有关，暂未找到解决方法。

依赖配置（package.json） #

"react": "experimental",
"react-dom": "experimental",

组件代码 #

import {use, useState, Suspense} from 'react'

const Component = ({url}) => {
    const fetchPromise = fetch(url).then(res => res.json());
    const data = use(fetchPromise);

    return (
        <div>
            {data}
        </div>
    );
}

报错堆栈信息 #

bundle.js:3509 Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.use) is not a function
    at Component (bundle.js:3509:58)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

可能的解决方向 #

• 锁定正确的实验版本："experimental"标签指向的版本可能未包含use Hook，建议直接指定带该特性的金丝雀版本，比如"react": "18.3.0-canary-20240520-abc123"（需替换为最新有效版本）。
• 检查Webpack别名映射：如果Webpack配置了React别名，可能错误将实验版映射到稳定版，导致找不到use Hook，确保别名指向项目中安装的实验版包路径。
• 启用实验特性标志：部分实验特性需要显式开启，可在Webpack的DefinePlugin中添加配置：

  new webpack.DefinePlugin({
    '__REACT_EXPERIMENTAL__': JSON.stringify(true)
  })
  

• 补全Suspense边界：use Hook必须在Suspense包裹的组件内使用，当前组件未被Suspense覆盖，建议调整使用方式：

  // 调用Component时添加Suspense包裹
  <Suspense fallback={<div>加载中...</div>}>
    <Component url="/api/data" />
  </Suspense>
  

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