如何通过Webpack打包工具正确导入Firebase Analytics避免报错？

我开发了一个基于Webpack构建、导入Firebase Analytics的JS应用。在清除缓存并删除node_modules目录后（之前存在其他报错），出现了如下模块解析错误：

Module not found: Error: Can't resolve 'firebase/analytics' in 'src'
Did you mean 'index.esm.js'?
BREAKING CHANGE: The request 'firebase/analytics' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains "type": "module").
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'firebase/analytics' in 'src'
  Parsed request is a module
  using description file: package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
      looking for modules in node_modules
        existing directory node_modules\firebase
          using description file: node_modules\firebase\package.json (relative path: .)
            using description file: node_modules\firebase\analytics\package.json (relative path: ./dist)
              Field 'browser' doesn't contain a valid alias configuration
        ...

我尝试改用require语法、导入firebase/analytics/dist、firebase/analytics/dist/index.esm.js，但都无法解决问题。当前index.js中的导入语句如下：

import initializeApp from "firebase/app";
import { getAnalytics, logEvent } from "firebase/analytics";

解决方法 #

• 配置Webpack自动解析扩展名
  在webpack.config.js的resolve.extensions里添加.js和.mjs，让Webpack能自动识别这些扩展名的模块：

  module.exports = {
    // ...其他配置项
    resolve: {
      extensions: ['.js', '.mjs', '.json']
    }
  };
  

• 重新安装兼容版本的Firebase
  可能是版本不匹配导致的解析问题，卸载后重新安装最新版：

  npm uninstall firebase
  npm install firebase@latest
  

• 调整项目的模块类型配置
  如果项目根目录的package.json里有"type": "module"字段，要么移除它，要么修改Webpack的输出配置适配ESM：

  module.exports = {
    output: {
      // ...其他输出配置
      libraryTarget: 'commonjs2'
    }
  };
  

• 指定完整的带扩展名的导入路径
  直接导入Firebase Analytics的ESM入口文件：

  import initializeApp from "firebase/app/dist/index.esm.js";
  import { getAnalytics, logEvent } from "firebase/analytics/dist/index.esm.js";
  

内容的提问来源于stack exchange，提问作者onie