Next.js项目调用require.context提示需appropriate loader报错如何解决？

问题根因 #

1. 配置文件重复导出：你在next.config.js中先后两次赋值module.exports，第一次编写的images配置被后续的withImages()导出完全覆盖，没有实际生效。
2. 正则匹配规则错误：/\.svg$|png/仅能匹配后缀为.svg的文件、以及文件名包含png字符的任意格式文件，无法正确匹配.png后缀的图片。
3. 加载器配置错误：imgix是对接Imgix云图床的专用加载器，本地静态资源不需要配置该参数，会导致本地资源加载逻辑异常。
4. 目录选择错误：Next.js 的public目录下的资源不会经过webpack打包处理，直接通过根路径即可访问，webpack自然没有配置对应的loader处理该目录下的文件。

解决方案 #

你可以根据自己的需求选择以下两种方案之一：

方案一：继续使用require.context动态导入 #

1. 安装svg处理依赖（如果需要导入svg）

npm install @svgr/webpack --save-dev

2. 修正next.config.js配置，合并配置项避免重复导出

const withImages = require("next-images");
module.exports = withImages({
  images: {
    // 删除错误的imgix相关配置，本地静态资源不需要自定义loader
    domains: [], // 有远程图片域名时再配置该字段
  },
  webpack(config) {
    // 配置svg加载规则
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });
    return config;
  }
});

3. 调整图片存储位置：把需要动态加载的图片从public目录移动到源码目录下，比如src/assets/images，只有源码目录下的资源才会被webpack处理。
4. 修正require.context写法：

// 需根据你的实际文件路径调整第一个参数
const reqContext = require.context("../assets/images", true, /\.(svg|png)$/);

// 遍历所有匹配文件存入对象，后续可直接通过文件名取值
const imageMap = {};
reqContext.keys().forEach(key => {
  const fileName = key.replace("./", "");
  imageMap[fileName] = reqContext(key);
});

方案二：直接使用public目录原生能力（更推荐） #

Next.js 对public目录的资源有原生支持，不需要经过webpack打包，动态引用时直接拼接路径即可，不需要配置任何loader，也不需要用require.context：

// 假设图片存放在 public/images 目录下
const imageName = "test.png";
const imageSrc = `/images/${imageName}`;

// 使用时直接把imageSrc赋值给img标签的src属性即可

内容的提问来源于stack exchange，提问作者Monkey D. Teach