NextJs/TS ESM 模块导入问题

Posted 2023-03-13

【中文标题】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 作者友情提供。