模块分辨率与 esm 和非 esm 文件不一致

Question

我有一个项目设置，其中有一个 Web 应用程序依赖于几个 Firebase SDK，这些 SDK 是 Webpacked 并通过 webpack 开发服务器提供服务。

从我可以收集到的信息来看，没有过多的细节，有一个最终的依赖项，它既有通用索引，也有 es2017 索引文件

有一些中间依赖项也有两者，比如 app 和一些只有 es2017 例如 messaging，还有一些只有一般索引文件。

我遇到的问题是，我已经调试了很长时间，当我在不同文件中导入中间依赖项时，从我的应用程序级别，在某些情况下它采用通用索引文件，而在某些情况下同库的es2017.

所以在错误堆栈跟踪中，我正在尝试初始化 Firebase 的消息服务：（暂时忽略缺少的承诺拒绝）

    at Provider.getImmediate (index.cjs.js:153)                     // in component lib 
    at Module.getMessagingInWindow (index.esm2017.js:1155)          // in messaging lib
    at new MessagingWrapper (MessagingWrapper.js:76)                // in my application 
    at FirebaseSession.push.56916.FirebaseSession.getMessaging (FirebaseSession.js:96)
    at PushPubSubModule_Class.<anonymous> (PushPubSubModule.js:118)
    at step (PushPubSubModule.js:63)
    at Object.next (PushPubSubModule.js:44)
    at fulfilled (PushPubSubModule.js:35)

最初加载消息模块时，它还访问了组件库并使用了正确的 es2017 索引文件，但稍后当我尝试实际获取消息服务的实例时，它转到了另一个通用索引文件。

在所有情况下，我都使用与 import {somthing} from "@firebase/messaging"

中相同的导入

我从来没有真正担心过这些事情，可能会错过一些基本的东西，但这感觉就像一个 webpack 错误，它预先确定从嵌套库加载哪个模块...

你知道我可以强制 webpack 解析 es2017 索引文件的方法吗？还是我应该打开一个错误？

更多详情：

这是我的 MessagingWrapper 文件的转译代码：

第 71 行：转到消息库中正确的 es2017 索引文件和组件库中正确的 es2017

第 76 行：转到消息中正确的 es2017 索引文件

行：

和第 1155 行：实际上转到 firebase/app lib es2017 文件来解析提供程序，返回到第 1155 行，然后调用 getImmediate，最终在组件库的通用索引文件中，如下所示：

我该如何解决这个问题？

Answer 1

@firebase/* 包是内部包，您不应该按照每个 npm directory listing 上的警告在您的代码中导入它们。正如您所遇到的，这可能会导致模块解析出现问题，因为您实际上是通过直接访问内部结构来跳过内部设置步骤。

相反，通过 firebase/*（对于 v9+ 上的模块化 SDK 或旧版 SDK v8 及更低版本）和通过 firebase/compat/*（对于v9+ 上的旧版 SDK）。

模块分辨率与 esm 和非 esm 文件不一致

Module resolution not consistent with esm and non esm files

firebase

webpack