CodeSandbox中React项目调用require.context报错：require.context is not a function

问题诊断 #

你的代码触发TypeError: require.context is not a function，核心原因有两个：

1. 语法错误 #

require.context的参数中多写了一个多余的双引号，导致代码解析异常：

// 错误写法：正则表达式后多了一个双引号
require.context("./images", false, /^\.\/.*$", "sync")

2. Webpack 5的语法兼容问题 #

React Scripts 5.x基于Webpack 5，在ES模块优先的环境下，require.context的调用逻辑与旧版本存在差异，直接使用容易出现兼容性问题。

解决方案 #

方案一：修复语法错误并调整require.context用法 #

先修正语法错误，确保参数格式符合Webpack 5要求：

//get images from folder
function importAll(r) {
  return r.keys().map(r);
}

// 修复多余引号后的正确写法
const images = importAll(
  require.context("./images", false, /^\.\/.*$/, "sync")
);

方案二：改用ES模块动态导入（推荐） #

React Scripts 5.x更适配ES模块语法，使用Webpack 5支持的import.meta.glob可以更稳定地批量导入图片：

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const importImages = async () => {
      // 批量导入images文件夹下所有文件，eager设为true表示同步加载
      const imageModules = import.meta.glob("./images/*", { eager: true });
      // 提取每个模块的默认导出（图片URL）
      const imageUrls = Object.values(imageModules).map(module => module.default);
      setImages(imageUrls);
    };

    importImages();
  }, []);

  function setImgColors() {
    if (images.length === 0) return;
    const randomImg = images[Math.floor(Math.random() * images.length)];
    console.log("随机选中的图片：", randomImg);
  }

  useEffect(() => {
    setImgColors();
  }, [images]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

依赖配置验证 #

你的package.json中依赖版本（react 18.1.0、react-dom 18.2.0、react-scripts 5.0.1）是兼容的，无需调整版本。

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