React+TypeScript全局引入Lodash报错：Uncaught ReferenceError: _ is not defined

你当前的问题是仅添加了TypeScript类型声明，但未在运行时将Lodash实例挂载到全局环境——TypeScript能识别_的类型，但浏览器运行时找不到这个变量，因此抛出ReferenceError。以下是几种可行的解决方案：

方案1：手动在入口文件挂载全局变量 #

在项目入口文件（比如src/index.tsx或src/main.tsx）中，将Lodash挂载到window对象：

import _ from 'lodash';

// 类型断言避免TS报错
(window as any)._ = _;

完成后，浏览器全局环境就会存在_变量，结合你已有的global.d.ts类型声明，就能在任意组件中直接使用_。

方案2：用Webpack ProvidePlugin自动注入（适合自定义Webpack配置的项目） #

如果项目使用自定义Webpack配置，可通过ProvidePlugin让Webpack自动在每个模块中注入Lodash，无需手动挂载或单独import：

1. 修改webpack.config.js：

const webpack = require('webpack');

module.exports = {
  // ...其他已有配置
  plugins: [
    // 新增插件配置
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
  ]
};

2. 保留现有的global.d.ts类型声明，之后在代码中直接使用_即可，无需任何import语句。

方案3：Create React App项目适配 #

如果是用CRA创建的项目（默认隐藏Webpack配置），可以选择：

• 直接采用方案1的手动挂载方式，简单快捷；
• 或者使用craco/react-app-rewired修改Webpack配置，配置逻辑同方案2。

额外检查 #

确保global.d.ts文件被TypeScript识别，检查tsconfig.json的include字段是否包含该文件：

{
  "include": [
    "src/**/*",
    "global.d.ts" // 确保路径正确
  ]
}

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