不能在带有 Next.js 的模块外使用 import 语句

【问题标题】：cannot use import statement outside a module with Next.js不能在带有 Next.js 的模块外使用 import 语句
【发布时间】：2020-06-17 05:40:44
【问题描述】：

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

import { cuteLuna } from 'lunacomponent';

我得到一个错误：不能在模块外使用 import 语句

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

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

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

谢谢！！

【问题讨论】：

【解决方案1】：

由于 Next.js 是一个在 server 和 client 端运行的框架，它需要为每个端使用正确的模块样式。

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

根据您的错误，我可以猜测您的 lunacomponent lib 没有导出 cjs 文件，因此它在 服务器 上失败，当您将 dynamic 与 ssr:false 一起使用时，您告诉 Next.js跳过服务器端运行，因此您不会遇到相同的错误。

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

【讨论】：