package.json配置React别名导致Hooks报错，原因是什么？

架构老林

2026-6-26

问题原因分析

针对你在Storybook中使用React别名库时出现的Cannot read properties of null (reading 'useState')错误，可能的原因如下：

多React实例冲突
使用npm:别名安装React时，可能导致项目中同时存在多个独立的React实例。React Hooks的运行依赖单一且全局的React实例上下文，当组件使用的React实例与Storybook内部依赖的React实例不一致时，Hooks无法找到有效的React上下文，进而抛出该错误。
Storybook未识别npm别名配置
Storybook的默认构建配置（Webpack/Rspack）可能无法解析package.json中的npm:别名语法，导致构建时未能正确引入react-latest/react-dom-latest，而是尝试加载未安装的标准react/react-dom包，最终使得React对象为null，调用useState时触发错误。
组件导入路径错误
若组件中依然使用import React from 'react'而非import React from 'react-latest'导入React库，而项目未安装标准react包，或Storybook未将react别名映射到react-latest，会导致React模块加载失败，出现null引用。
TypeScript配置未同步别名
虽然你配置了@types/react-latest，但如果tsconfig.json的paths字段未将react/react-dom映射到对应的别名包，TypeScript的模块解析逻辑可能与运行时解析不一致，间接导致运行时加载错误的模块，引发Hooks异常。