React+TypeScript+Webpack4导入JSON文件报错：找不到模块

我来帮你排查这个问题，你遇到的Cannot find module 'data/mockup.json'错误，大概率是路径配置或者TypeScript类型解析的问题，咱们一步步来解决：

1. 先确认文件路径是否正确 #

你写的import data from "data/mockup.json"是相对路径还是想使用根路径别名？

• 如果是相对路径：检查当前.tsx文件和data/mockup.json的位置关系，比如你的TSX在src/components/xxx.tsx，而JSON在src/data/mockup.json，那路径应该写成../data/mockup.json
• 如果想用根路径别名（比如直接写data/xxx），需要在Webpack的resolve.alias里添加配置，先引入path模块，再配置别名：

const path = require('path');

module.exports = {
  // 其他配置...
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    alias: {
      'data': path.resolve(__dirname, './src/data') // 替换成你实际的data文件夹路径
    }
  }
}

2. 配置TypeScript支持JSON模块导入 #

TypeScript默认不识别JSON模块的类型，所以需要在tsconfig.json里开启两个关键配置：

{
  "compilerOptions": {
    "resolveJsonModule": true, // 允许导入JSON文件
    "esModuleInterop": true, // 确保JSON模块能被正确当作ES模块处理
    // 你的其他TS配置...
  }
}

如果开启后还是有问题，可以手动添加类型声明文件：在项目里新建一个typings/json.d.ts文件，内容如下：

declare module "*.json" {
  const value: any;
  export default value;
}

这样TypeScript就会识别所有.json文件的模块类型了。

3. 检查Webpack的resolve.modules配置 #

如果你的data文件夹在项目的src目录下，需要让Webpack知道去src目录查找模块，在resolve里添加modules配置：

module.exports = {
  // 其他配置...
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    modules: ['node_modules', path.resolve(__dirname, 'src')], // 加入src目录
    // 其他resolve配置...
  }
}

按照上面的步骤调整后，应该就能正常导入JSON文件了。

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