ReactJS中import()无法使用字符串变量，硬编码字符串却正常？

你遇到的问题核心在于打包工具的静态分析机制：

当你使用硬编码的字符串import("../markdowns/doc.md")时，Webpack、Vite这类打包工具在构建阶段就能明确识别到要导入的文件路径，会自动把这个Markdown文件纳入打包资源中。

但如果把路径存在变量mdLoc里再导入，打包工具无法在构建时静态解析出具体要导入哪个文件，也就不会提前打包对应的资源，运行时自然找不到模块。

解决办法 #

• 保留部分静态路径：用模板字符串固定路径前缀，让打包工具能识别需要打包的文件范围，比如：

  const fileName = "doc";
  useEffect(() => {
    import(`../markdowns/${fileName}.md`)
  }, []);
  

  这种写法会让工具打包../markdowns/目录下所有.md文件，运行时就能正确加载对应文件。

• 配置打包工具允许动态路径：如果必须使用完全动态的变量，可以在打包工具的配置里指定允许的路径范围。比如Webpack可以用require.context来批量导入目录下的文件：

  const mdContext = require.context("../markdowns/", false, /\.md$/);
  useEffect(() => {
    const mdModule = mdContext(mdLoc);
  }, []);
  

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