在Next.js中如何捕获JavaScript动态import()的导入错误？

因为你遇到的是构建阶段错误，而try-catch和import().catch()只能捕获运行时错误。

Next.js在构建（或开发时的编译）阶段，会通过Webpack提前解析所有静态的import路径，如果path-to-module不存在，Webpack会直接抛出模块未找到的错误——这个错误发生在代码运行之前，所以你的运行时错误捕获逻辑根本没机会执行。

要实现加载可能不存在的模块，需要让Webpack不要在构建阶段解析这个路径，留到运行时处理，有两种常用方式：

方法1：使用Webpack魔法注释/* webpackIgnore: true */ #

在动态导入时添加该注释，告诉Webpack跳过对该模块的静态解析：

const Blog = async () => {
    let Layout = <div>Fallback layout</div>
    try {
        const module = await import(/* webpackIgnore: true */ 'path-to-module')
        if (module?.ModuleLayout) {
            Layout = module.ModuleLayout
        }
    } catch (error) {
        // 捕获运行时加载失败的错误
    }
    return <Layout />
}

注意：这种方式下，模块路径会直接传递给运行时的import()，Webpack不会处理该模块的打包，若模块实际存在，需确保它能被运行时正确访问（比如放在public目录或保证路径可访问）。

方法2：使用动态路径拼接 #

通过变量拼接路径，让Webpack无法提前解析具体路径，只能在运行时处理：

const Blog = async () => {
    let Layout = <div>Fallback layout</div>
    const modulePath = 'path-to-module'
    try {
        const module = await import(`${modulePath}`)
        if (module?.ModuleLayout) {
            Layout = module.ModuleLayout
        }
    } catch (error) {
        // 捕获运行时加载失败的错误
    }
    return <Layout />
}

这种方式下，Webpack会将路径视为动态内容，不会在构建阶段检查模块是否存在，这时try-catch就能正常捕获加载错误了。

额外提示：原代码中直接解构import().catch()的返回值存在风险——若加载失败，import()的catch返回undefined，解构ModuleLayout会触发新的错误，建议先判断模块是否存在，再读取导出内容。

内容的提问来源于stack exchange，提问作者Big boy