无法在 Next.js 模块外部使用 import 语句

Question

我需要导入一个 npm 包，但当我使用这样的“import”语句时失败

import { cuteLuna } from 'lunacomponent';

我收到一个错误：无法在模块外部使用 import 语句

当我将其更改为动态导入后，它就可以工作了。

const cuteLuna = dynamic(() => import('lunacomponent').then((a) => a.cuteLuna), {ssr: false});

我的问题是，为什么我应该使用动态导入而不是通常的导入？

谢谢！！

Answer 1

由于 Next.js 是一个在服务器端和客户端运行的框架，因此它需要为每个框架使用正确的模块样式。

服务器端在 Node 上运行，因此您的 lib 必须公开commonjs。

从您的错误中我可以猜测您的lunacomponentlib 没有导出 cjs 文件，因此它在服务器上失败，当您使用dynamicwithssr:false告诉 Next.js 跳过服务器端运行时，因此您不会遇到相同的错误。

我无法lunacomponent在公共 npm 注册表上找到这个库，因此我无法检查我的假设。