Javascript lazy（）导入可以'；如果模块的路径来自常量，则无法找到该模块

我正试图实现一个基于路由的上下文侧栏。其思想是容器页面是相同的，但是侧栏和一些内容是动态加载的

React.lazy（）

完全符合我的要求，但出于某种原因，只有当我将模块路径定义为实际字符串时，它才起作用：

const SideNav = React.lazy(() =>
  import("./navigation/concepts") // this is fine
);

但是，我非常希望将其动态化，以便我可以定义模块位置的路线图，如下所示：

const module_map = {"/docs/concepts" : "./navigation/concepts"};
    
console.log(module_map[this.props.location.pathname] === "./navigation/concepts"); // Just for sanity: this print 'true'
    
const SideNav = React.lazy(() =>
  import(module_map[this.props.location.pathname])
);

这将导致一个错误：

Error: Cannot find module './navigation/concepts'

我尝试首先将模块路径定义为常量，甚至将其作为父组件的属性传递，但结果是相同的

---

你知道为什么会发生这种情况，以及我如何解决它吗？

使用dirname而不是使用相对路径

import React, { lazy, Suspense } from "react";

const file = `${__dirname}/components/MyComponent`;

const MyComponent = lazy(() => import(file));
export default function App() {
  return (
    <Suspense fallback="Loading">
        <MyComponent />
    </Suspense>
  );
}

import React，{lazy，suspent}来自“React”；
常量文件=`${uu dirname}/components/MyComponent`；
const MyComponent=lazy（（）=>import（file））；
导出默认函数App（）{
返回(
);
}

---

有趣的是，在您的代码沙盒中，

\uu dirname

解析为

/src

，提供了

/src/components/MyComponent

。在我的代码中，它解析为一个空字符串，提供

//components/MyComponent

。即使我手动将路径设置为您示例中解析到的路径，也无法找到该模块。这可能是由于您的目录结构和网页包配置造成的。因为正如你在codesandbox中看到的，它在正常情况下工作。我猜这是网页包配置-但是我用

create react app

启动了我的应用程序，我想我能做的配置很少？试试这个解决方案（在底部）