React.js使用变量拼接图片路径时出现模块找不到编译报错

你遇到的编译错误由3个代码问题共同导致：

1. 组件调用方式错误：你定义的Box是React组件，入参是解构的props对象，但你直接把它当普通函数传了4个位置参数调用，导致组件内部拿到的img等参数全是undefined
2. Tailwind类名动态拼接失效：Tailwind在编译阶段会静态扫描代码里的类名生成对应CSS，你写的模板字符串拼接类名bg-[url('./img/tools/${img}')]不会被Tailwind识别，${img}会被当成普通字符串直接写入最终CSS文件
3. webpack路径解析失败：webpack处理CSS文件时，会把CSS里的url路径当成真实文件路径解析，它看到路径里的${img}字面量，就会直接去找./img/tools/${img}这个不存在的文件，最终抛出编译错误

按以下步骤修改代码即可解决问题：

• 把Box的调用方式改成标准JSX组件写法，按props格式传参
• 放弃动态拼接Tailwind背景类的写法，动态背景图改用内联style属性设置，Tailwind只保留bg-cover、bg-center这类固定样式类
• 调整图片存在性判断的require写法，保留静态路径前缀，让webpack能正确定位图片目录完成打包

const Tools = () => {
    return (
        <main className="my-4">
            <h1 className="text-4xl">Инструменты</h1>
            <div>
                <ul>
                    {/* 修正为标准JSX组件调用，按props传参 */}
                    <Box name="Big test" desc="TESTS ARE COOL" img="construction.png" href="#!" />
                </ul>
            </div>
        </main>
    )
}

const Box = ({name, desc, img, href}) => {
    let imgExists = false;
    let imgSrc = '';
    try{
        // 写死路径前缀，保证webpack能定位到图片目录做静态分析
        imgSrc = require(`./img/tools/${img}`);
        imgExists = true;
    }
    catch(err){
        imgExists = false;
    }
    return (
        <li>
            <a href={href}>
                <div>
                    <h2>{name}</h2>
                    <p>{desc}</p>
                </div>
                <div 
                    className={imgExists ? "bg-cover bg-center h-40 w-full" : "not-found"}
                    style={imgExists ? {backgroundImage: `url(${imgSrc})`} : {}}
                ></div>
            </a>
        </li>
    )
}

export default Tools

• React组件不要直接当普通函数调用，必须用JSX标签形式渲染，否则React不会按组件规则处理生命周期和渲染逻辑
• 所有带变量插值的动态Tailwind类名都不会被编译识别，涉及动态值的样式请用内联样式或CSS变量实现
• webpack处理动态require时，不能写完全动态的路径，必须保留至少一级静态路径前缀，否则webpack无法确定要打包的文件范围

内容的提问来源于stack exchange，提问作者Anime.pdf