如何捕获 JavaScript 中的动态导入错误？答案

【问题标题】：How to catch dynamic import error in JavaScript?如何捕获 JavaScript 中的动态导入错误？
【发布时间】：2023-01-31 18:28:51
【问题描述】：

我正在使用 Next.js 开发网站。

我想使用动态导入import() 来动态加载模块。它可能不存在。

如果它不存在，我可以压制它：

const Blog = async () => {

    let Layout = <div>Fallback layout</div>
    try {
        const { ModuleLayout } = await import('path-to-module').catch(reason => {})
        if (ModuleLayout) {
            Layout = ModuleLayout
        }
    }
    catch (error) {
        // intentionally swallawed
    }

    return <Layout />
}

我希望 try-catch 语句为我抑制错误。

但我得到这个错误：

找不到模块：无法解析“模块路径”

为什么 catch 块不起作用？如何捕获动态导入的错误？

【问题讨论】：

<Layout /> 是否呈现？
不，因为 Next.js 显示错误而不是渲染。

标签： javascript next.js

【解决方案1】：

try-catch 在浏览器和 Node 中都可以使用普通的 JavaScript：

  try {
    const { ModuleLayout } = await import('path-to-module').catch(reason => { })
    if (ModuleLayout) {
      console.log(ModuleLayout);
    }
  }
  catch (error) {
    console.log('error');
  }

顺便说一句，.catch 是多余的。

我认为这里的问题是 Next 通过 WebPack 对导入进行了额外的分析：

https://github.com/webpack/webpack/issues/6680#issuecomment-370800037

此处的建议是将路径限制为已知目录，但这可能不适用于您的情况。也许您的用例会在 Next 存储库上产生一个很好的问题，这样 Vercel 就有动力添加一个标志来禁用某些导入的静态分析。

Next中关于动态导入的文档： https://nextjs.org/docs/advanced-features/dynamic-import#example

【讨论】：