模块解析与esm和非esm文件不一致

Question

我有一个项目设置，在那里，我有一个网络应用程序，依赖很少的Firebase SDK，是通过网络包装和服务webpack开发服务器。

从我可以收集到的信息来看，没有过多的细节，最终的依赖关系是具有通用索引和es2017索引文件的。

​

​

还有一些中间依赖项两者兼有，比如应用程序和一些只有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目录列表上警告的那样在代码中导入它们。正如您所遇到的，这可能会导致模块解析的问题，因为您基本上跳过了内部设置步骤，直接访问了内部。

相反，通过firebase/* (用于v9+上的模块化SDK或遗留SDK v8和更低的版本)和firebase/compat/* (用于v9+上的遗留SDK )使用公共API接口。