Reactjs 动态导入不适用于Webpack 4+；反应+@可加载/组件

我有一个项目，使用反应与网页4，巴贝尔和打字脚本。我正在尝试进行代码拆分并为此安装

@loadable/component

。不幸的是，当我调用

loadable（（）=>import（…）

将我的一个页面放在不同的块中时，webpack或babel似乎没有意识到这一点，什么都没有发生，我只保留了一个JS文件。在S.O.搜索文档和其他问题，但似乎没有任何效果=\

这是我的

.tsx

文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@loadable/babel-plugin", "@babel/plugin-syntax-dynamic-import"]
}

import loadable from“@loadable/component”；
const TextDisplayPage=可加载（（）=>导入（“./pages/TextDisplayPage”）；
常数批准=（）=>(
(
)}
/>
);

我的

.babelrc

文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@loadable/babel-plugin", "@babel/plugin-syntax-dynamic-import"]
}

我的

webpack.config.js

文件的一部分（不知道是否有足够的信息，但如果不只是让我知道）：

/**/
模块：{
规则：[
{
测试：/\.tsx？$/,，
排除：[/node_modules/]，
用法：[“巴别塔加载器”、“ts加载器”]，
}
]
/*...*/

---

非常感谢您的帮助。提前谢谢！

您怎么知道您只有一个js文件？您是否正在调用webpack进行捆绑？如果是，您是否在生产模式下运行它？是的，我正在调用webpack。尝试在开发和生产模式下运行，但没有任何效果您还可以共享您的

babel

配置吗？如果是这样，它会更好以工作实例为例well@SirPedr您的

tsconfig.json

中的

module

是否设置为

esnext

？这有点尴尬，但我暂时停止了这方面的工作，忘记了那个问题。现在我开始编写这方面的代码，我的

module

不是

esnext

，并将其修复，再加上更改

target

在

webpack.config.js

到

web

解决了问题。谢谢！