如何在TypeScript中导入css-mediaquery模块？

遇到这个「Cannot find module 'css-mediaquery'」的报错，我通常会按以下几个步骤逐一排查解决：

• 第一步：确认模块及类型定义已正确安装
  首先要确保你已经把css-mediaquery包安装到项目中，同时因为是TypeScript项目，还要确认对应的类型定义是否存在：

  1. 安装核心包：

     npm install css-mediaquery --save
     # 或者用yarn
     yarn add css-mediaquery
     

  2. 安装类型定义（如果包本身没有自带TS类型的话）：

     npm install @types/css-mediaquery --save-dev
     # yarn版本
     yarn add @types/css-mediaquery --dev
     

• 第二步：检查TypeScript配置文件
  打开项目根目录的tsconfig.json，确认以下配置是否正确：

  • 确保moduleResolution设置为node（这是TypeScript针对Node.js项目的默认解析策略，能正确找到node_modules里的包）：

    {
      "compilerOptions": {
        "moduleResolution": "node",
        // 其他配置...
      }
    }
    

• 第三步：清除缓存并重启开发环境
  有时候编辑器或包管理器的缓存会导致模块解析异常，试试这些操作：

  1. 清除Node.js模块缓存并重新安装依赖：

     rm -rf node_modules package-lock.json
     npm install
     # yarn用户执行：rm -rf node_modules yarn.lock && yarn install
     

  2. 重启你的代码编辑器（比如VS Code可以执行「Developer: Reload Window」命令），让编辑器重新加载模块信息。

• 第四步：检查测试框架的配置（针对.test.tsx文件）
  因为报错出现在测试文件中，要确认你的测试框架（比如Jest）是否正确配置了模块解析：

  • 检查jest.config.js或jest.config.ts中的moduleNameMapper，有没有误将css-mediaquery映射到错误路径；
  • 确保没有在transformIgnorePatterns中排除css-mediaquery，否则测试框架会跳过对它的转换，导致解析失败。

如果以上步骤都试过还是不行，可以检查一下你的导入语句是否写错（比如拼写错误css-mediaquery），或者确认项目的工作目录是否正确。

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