Search code examples
javascriptfirebasefirebaseuies6-modulesrollupjs

Import firebaseui with rollup

I am trying to import the firebaseui library with rollup. The ui loads fine if I include firbaseui with the cdn they provide:

<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" />

but if I instead try to import it with import * as firebaseui from 'firebaseui' I get the following error in the browser: Uncaught TypeError: Failed to resolve module specifier "firebaseui". Relative references must start with either "/", "./", or "../".

I am using rollup's plugin-node-resolve and plugin-commonjs with this config:

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()],
};

which I thought was meant to handle bare module errors like this, so I don't know how to fix this.

Solution

  • It turns out this problem is caused by the way firebaseui improperly imports firebase in it's ES module build. I raised an issue here but it got closed. A workaround is to go into node_modules and find the ES module build for firebaseui (node_modules/firebaseui/dist/esm.js), and change the first line from import * as firebase from 'firebase/app'; to import firebase from 'firebase/app';.