Javascript 如何从变量或道具-动态路由器导入组件

好的解决方案的背景（底部的简短问题）

我有一个数据库（API），它可以生成AppA、AppB、AppC等应用程序的数据列表，并带有它们的名称、路径

有了地图，我会根据这个数据列表（在主

中）生成（react router）到这些应用程序的链接
在Function.requirensure[作为e]（）
评估时(webpack:///./src/components/AppCaller.js?:45:36)
初始值为ElazyComponentType时(webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:1432:20)
在readLazyComponentType(webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:11862:3)
...
requirensure@main.js:106
eval@AppCaller.js:45

及

0.main.js:1加载资源失败：服务器响应状态为404（未找到）

大家好

所以，这不是一个反应，而是一个网页问题

当您使用React lazy导入特定组件，并使用
npm run dev（或build）
webpack“编译”时，按Chunck拆分代码，但配置文件错误。
这是我的配置文件，它可以工作：

module.exports = {
    output: {
    filename: 'App.js',
    publicPath: '/static/frontend/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

我需要将“公共路径”添加到“chunck”脚本的路径中。：）
使用
React.lazy
时显示的完整错误消息是什么？您可以单击以包含问题的详细信息。感谢cbr提供您的答案，使用完整错误消息编辑的消息您可以包含消息所指的错误吗？它说“上面的错误”-请添加该错误。是的，对不起，在chrome中筛选了错误。我没有看到其他错误：）您是否尝试改用ES5“require”
import React from "react";
import Window from "./dashComponents"
import subApp from "./Apps/Store"

 class AppCaller extends React.Component {

  render() {
    return (
        <Window name={this.props.name}>
            <subApp/>
        </Window>
    )
  }
}

export default AppCaller


import subApp from this.props.path 

import React, {Suspense} from "react";
import Window from "./dashComponents"
//import subApp from "./Apps/Store"

    const path = this.props.path
    let name = this.props.name

 function AppCaller() {

    const SubApp = React.lazy(() => import('./Apps/'+name))


    return (
        <Window name={name}>
            <Suspense fallback={<h2>"Chargement..."</h2>}>
                <SubApp/>
            </Suspense>
        </Window>
    )

}

export default AppCaller


 class AppCaller extends React.Component {

  render() {

    const SubApp = React.lazy(() => import('./Apps/'+this.props.name));

    return (
        <Window name={this.props.name}>
            <Suspense fallback={"Chargement..."}>
                <SubApp/>
            </Suspense>
        </Window>
    )
  }
}

export default AppCaller

module.exports = {
    output: {
    filename: 'App.js',
    publicPath: '/static/frontend/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};