使用动态导入时遇到错误“错误：找不到模块”React.Suspense

问题描述

我在使用动态导入时遇到了一个奇怪的错误。

我创建了一个可重现的存储库和一个沙箱（链接如下）。

奇怪的是 SandBox 工作得很好，但 repo 中的代码却崩溃了 -- 使用完全相同的代码。

这是一个简单的 npx create-react-app，包含以下内容：

// App.tsx
import React from 'react';
import MySuspense from './MySuspense';

export default function App() {
    return <MySuspense importPath={'@material-ui/icons/DoneAll'} />;
}

// MySuspense.tsx
import React from 'react';

type TSuspense = {
    importPath: string;
};
const MySuspense = React.memo(({ importPath }: TSuspense) => {
    const Component = React.lazy(() => import(importPath));

    return (
        <React.Suspense fallback={<div />}>
            <Component />
        </React.Suspense>
    );
});

export default MySuspense;

这会引发错误，

Error: Cannot find module '@material-ui/icons/DoneAll'

我的 lint 也在运行，它给了我一个警告，

./src/MySuspense.tsx
Critical dependency: the request of a dependency is an expression

但是如果我这样做了，

const Component = React.lazy(() => import(`${path}`));
// instead of const Component = React.lazy(() => import(path));

然后 lint 警告消失。

如果我不是将路径作为道具传递，而是对导入路径进行硬编码，则它可以工作：

const MySuspense = React.memo(({ importPath }: TSuspense) => {
    const Component = React.lazy(() => import('@material-ui/icons/DoneAll'));

    return (
        <React.Suspense fallback={<div />}>
            <Component />
        </React.Suspense>
    );
});

但这违背了动态导入的全部目的。

在沙盒中运行的完全相同的代码工作得很好。我已经拔头发好几个小时了。

我已经尝试添加一个 .babelrc 作为记录的 here，但是没有用，

{
    "presets": ["react","esnext"],"plugins": ["@babel/plugin-Syntax-dynamic-import"]
}

这里有什么问题？我已将 repo 克隆到 3 台不同的机器上，但出现相同的错误。沙箱有什么不同，为什么代码会在那里工作？某些配置中是否有我遗漏的重要内容，或者我只是在这里发疯了？

老实说，在这一点上，任何帮助都值得赞赏，我已经尝试了此时我能想到的所有方法。

Github repo

Sandbox

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dynamic-import javascript reactjs reactjs typescript typescript