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 模块”?