NextJs/TS ESM 模块导入问题

Posted

技术标签:

【中文标题】NextJs/TS ESM 模块导入问题【英文标题】:NextJs/TS ESM module import issue 【发布时间】:2021-11-23 12:12:15 【问题描述】:

Code Sandbox

我正在将一些代码迁移到 NextJS 11 / Webpack 5 以及一些现在只是 esm 的模块(整个备注/统一生态系统)。

在升级之前,我能够将所有文件作为摘要导出到文件夹中的 index.ts 中,例如:

export  default as MarkdownRenderer  from './markdownRenderer'

并且在父文件夹sal“lib”中(假设上面是在一个名为elements的文件夹中);

export * from './elements'

然后在我的代码中我可以做到:

import  MarkdownRenderer  from '../lib'

这不再有效并中断:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 

经过一些实验,我发现我无法导入/导出元素摘要索引 - 我必须将所有组件/文件直接添加到 lib 索引中:

// Not workie
//export * from './elements'

// Workie
export  default as MarkdownRenderer  from './elements/markdownRenderer'

我为 NextJS 启用了 esm 标志,还尝试了next-transpile-modules,但没有运气。

在上面的沙箱中,查看src/lib/index.ts 并更改 cmets 以查看其工作/不工作。

如何保持按文件夹管理摘要文件的能力?我认为这是一个 webpack 问题,但并不完全确定。 Typescript 在开发过程中当然不会抱怨。

请注意,它似乎适用于较旧的节点(无论 CodeSanbox 上的默认值是什么 - 可能是 10 个),但在 14 月 16 日它就不行了。

【问题讨论】:

这太奇怪了;我不知道这是否可能是因为 CodeSandbox 但我分叉了你的例子,尝试了import * as ns from '../lib';,做了console.log(ns);,然后console.log(ns.MarkdownRenderer),然后将导入改回旧的并开始工作(虽然我也改变了默认导出到命名的默认导出,但这本身并没有解决任何问题)。可能值得考虑报告它 Vercel,因为它看起来对我来说也是一个错误。 这个错误发生在我本地。我必须补充一点,您需要节点 14+ - 我认为它适用于较旧的节点。我会将其作为注释添加到我的帖子中。 @paolostyle 确实是一个错误或缺少的功能。发布在 NextJs 上并找到了一个解决方法。 【参考方案1】:

所以目前的解决方案是调整 NextJS webpack 配置:

config.optimization.providedExports = true

Answerwebpack 作者友情提供。

【讨论】:

以上是关于NextJs/TS ESM 模块导入问题的主要内容,如果未能解决你的问题,请参考以下文章

检测 NODE.JS 脚本是通过 bash(unix)/cmd(windows)直接调用还是导入(ESM 模块加载器)[重复]

将 D3.js 7.0.0 与 Next.js 11.0.1 一起使用时,如何解决“[ERR_REQUIRE_ESM]:必须使用导入来加载 ES 模块”?

在服务工作者文件中使用 ESM(导入/导出)

Node模块导入规则总结

如何在打字稿项目中导入节点模块。 ERR_REQUIRE_ESM

如何修复必须使用导入来加载 ES 模块 discord.js