使用汇总导入 firebaseui

Question

我正在尝试使用汇总导入 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 (node_modules/firebaseui/dist/esm.js) 的 ES 模块构建，并将第一行从 import * as firebase from 'firebase/app'; 更改为 import firebase from 'firebase/app';.

使用汇总导入 firebaseui

Import firebaseui with rollup

javascript

firebase

rollupjs

firebaseui

es6-modules