使用rollup导入firebaseui

Question

我正在尝试使用rollup导入firebaseui库。如果我将firbaseui包含在他们提供的cdn中，则ui加载正常：

<script src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css" />

但是，如果我改为尝试使用import * as firebaseui from 'firebaseui'导入它，我会在浏览器中得到以下错误：Uncaught TypeError: Failed to resolve module specifier "firebaseui". Relative references must start with either "/", "./", or "../".

我正在使用rollup的plugin-node-resolve和plugin-commonjs，配置如下：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default {
  // If using any exports from a symlinked project, uncomment the following:
  // preserveSymlinks: true,
  input: ["src/index.js"],
  output: {
    file: "public/index.js",
    format: "es",
    sourcemap: true,
  },
  plugins: [resolve(), commonjs()],
};

我认为它是为了处理像这样的裸模块错误，所以我不知道如何解决这个问题。

Answer 1

事实证明，这个问题是由firebaseui在其ES模块构建中不正确地导入firebase的方式引起的。我提出了一个问题here，但它被关闭了。解决方法是进入node_modules并找到为firebaseui构建的ES模块(node_modules/firebaseui/dist/esm.js)，然后将第一行从import * as firebase from 'firebase/app';更改为import firebase from 'firebase/app';。