使用汇总导入firebaseui

Question

我正在尝试使用rollup导入fire baseui库。如果我将firbaseui包含在他们提供的cdn中，用户界面加载良好：

<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*作为firebaseui从'firebaseui'导入它，我会在浏览器中遇到以下错误：Uncaught TypeError:无法解析模块说明符“firebaseui”。相对引用必须以“/”、“/”或“./”开头

我在这个配置中使用了rollup的plugin-node-解析和plugin-Common js：

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造成的。我在这里提出了一个问题，但它被关闭了。解决方法是进入node_modules并找到firebaseui的ES模块构建（node_modules/firebaseui/dist/esm.js），并将第一行从import*改为firebase，从“firebase/app”改为“firebase” 至从“firebase/app”导入firebase 。