"Error: Failed to collect page data" when building app that uses Firebase 10.9.0 ("firebase/auth/web-extension") and Next.js. #63540

george-thomas-hill · 2024-03-21T00:30:36Z

Link to the code that reproduces this issue

https://github.com/george-thomas-hill/next-and-firebase-build-error

To Reproduce

I get "Error: Failed to collect page data" when building an app that uses Firebase 10.9.0 and Next.js.

More specifically, the error comes when I import from "firebase/auth/web-extension".

Here is a terminal session that demonstrates reproducing the issue in a minimal installation of Next.js and Firebase.


~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase

$ npx create-next-app@latest
✔ What is your project named? … next-and-firebase
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/georgehill/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase.

Using npm.

Initializing project with template: default 


Installing dependencies:
- react
- react-dom
- next


added 21 packages, and audited 22 packages in 5s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created next-and-firebase at /home/georgehill/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase


~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase

$ ls
next-and-firebase

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase

$ cd next-and-firebase/

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ ls
jsconfig.json    node_modules  package-lock.json  README.md
next.config.mjs  package.json  public             src

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ npm run build

> [email protected] build
> next build

   ▲ Next.js 14.1.4

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (3/3) 
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                             Size     First Load JS
┌ ○ /                                     4.89 kB        82.9 kB
├   └ css/6b25432f67ef1376.css            1.75 kB
├   /_app                                 0 B              78 kB
├ ○ /404                                  181 B          78.2 kB
└ λ /api/hello                            0 B              78 kB
+ First Load JS shared by all             78.7 kB
  ├ chunks/framework-5429a50ba5373c56.js  45.2 kB
  ├ chunks/main-fe015bc011991627.js       31.8 kB
  └ other shared chunks (total)           1.76 kB

○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js


~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ npm install firebase

added 84 packages, and audited 106 packages in 7s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ ls
jsconfig.json    node_modules  package-lock.json  README.md
next.config.mjs  package.json  public             src

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ pico src/pages/index.js 

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ cat src/pages/index.js 
import Head from "next/head";
import Image from "next/image";
import { Inter } from "next/font/google";
import styles from "@/styles/Home.module.css";

import { GoogleAuthProvider, signInWithCredential } from 'firebase/auth/web-extension';

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={`${styles.main} ${inter.className}`}>
        <div className={styles.description}>
          <p>
            Get started by editing&nbsp;
            <code className={styles.code}>src/pages/index.js</code>
          </p>
          <div>
            <a
              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
              target="_blank"
              rel="noopener noreferrer"
            >
              By{" "}
              <Image
                src="/vercel.svg"
                alt="Vercel Logo"
                className={styles.vercelLogo}
                width={100}
                height={24}
                priority
              />
            </a>
          </div>
        </div>

        <div className={styles.center}>
          <Image
            className={styles.logo}
            src="/next.svg"
            alt="Next.js Logo"
            width={180}
            height={37}
            priority
          />
        </div>

        <div className={styles.grid}>
          <a
            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2>
              Docs <span>-&gt;</span>
            </h2>
            <p>
              Find in-depth information about Next.js features and&nbsp;API.
            </p>
          </a>

          <a
            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2>
              Learn <span>-&gt;</span>
            </h2>
            <p>
              Learn about Next.js in an interactive course with&nbsp;quizzes!
            </p>
          </a>

          <a
            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2>
              Templates <span>-&gt;</span>
            </h2>
            <p>
              Discover and deploy boilerplate example Next.js&nbsp;projects.
            </p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2>
              Deploy <span>-&gt;</span>
            </h2>
            <p>
              Instantly deploy your Next.js site to a shareable URL
              with&nbsp;Vercel.
            </p>
          </a>
        </div>
      </main>
    </>
  );
}

~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$ npm run build

> [email protected] build
> next build

   ▲ Next.js 14.1.4

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
request to https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap failed, reason: 

Retrying 1/3...
 ✓ Compiled successfully
   Collecting page data  ..(node:1043912) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/georgehill/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase/node_modules/@firebase/auth/dist/web-extension-esm2017/index.js:1
import { r as registerAuth, i as initializeAuth, a as indexedDBLocalPersistence, c as connectAuthEmulator } from './register-7b89e556.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
/home/georgehill/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase/node_modules/@firebase/auth/dist/web-extension-esm2017/index.js:1
import { r as registerAuth, i as initializeAuth, a as indexedDBLocalPersistence, c as connectAuthEmulator } from './register-7b89e556.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

> Build error occurred
Error: Failed to collect page data for /
    at /home/georgehill/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase/node_modules/next/dist/build/utils.js:1258:15 {
  type: 'Error'
}
   Collecting page data  .
~/Dropbox/GH Data (Dropbox)/Data 1 (Ind)/a Business, Current/ETDL/experiments/next-firebase/next-and-firebase

$

In the pico session initiated in the above terminal session, the only change that I made to src/pages/index.js was the addition of:

import { GoogleAuthProvider, signInWithCredential } from 'firebase/auth/web-extension';

Current vs. Expected behavior

Current behavior: npm build fails at the Collecting page data step.

Expected behavior: The app builds.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #86-Ubuntu SMP Mon Jul 10 16:07:21 UTC 2023
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

My app is a Chrome extension.

At first, I was able to use Next.js to build my app using Firebase 10.6.0 without any issues.

However, when I submitted my app to the Chrome Web Store, it was rejected because Firebase Auth loads remote code.

I learned that instead of using . . .

import { GoogleAuthProvider, signInWithCredential } from 'firebase/auth';

. . . I need to use . . .

import { GoogleAuthProvider, signInWithCredential } from 'firebase/auth/web-extension';

.

To do that, I had to update my app past Firebase 10.8.0.

Upon doing so, I immediately got the build error detailed above.

I have tried Firebase 10.8.0, 10.8.1, and 10.9.0.

I have also tried Next.js 13.5.6, 14.1.3, and 14.1.4.

I would be grateful for a fix or for a workaround.

Thank you!

The text was updated successfully, but these errors were encountered:

george-thomas-hill · 2024-03-21T08:06:47Z

These issues seem related:

#58707

#58817

george-thomas-hill · 2024-03-21T08:10:36Z

Per . . .

#58707 (comment)

. . . I tried building using Next.js 14.0.2, but that didn't help; I got the same error.

zzh8829 · 2024-11-26T23:57:30Z

transpilePackages option fixed this issue for me #58817 (comment)

george-thomas-hill added the bug Issue was opened via the bug report template. label Mar 21, 2024

benface mentioned this issue Oct 4, 2024

[BUG] "Cannot use import statement outside a module" when imported from another dependency in Next app react-dropzone/react-dropzone#1377

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Error: Failed to collect page data" when building app that uses Firebase 10.9.0 ("firebase/auth/web-extension") and Next.js. #63540

"Error: Failed to collect page data" when building app that uses Firebase 10.9.0 ("firebase/auth/web-extension") and Next.js. #63540

george-thomas-hill commented Mar 21, 2024

george-thomas-hill commented Mar 21, 2024 •

edited

Loading

george-thomas-hill commented Mar 21, 2024

zzh8829 commented Nov 26, 2024

"Error: Failed to collect page data" when building app that uses Firebase 10.9.0 ("firebase/auth/web-extension") and Next.js. #63540

"Error: Failed to collect page data" when building app that uses Firebase 10.9.0 ("firebase/auth/web-extension") and Next.js. #63540

Comments

george-thomas-hill commented Mar 21, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

george-thomas-hill commented Mar 21, 2024 • edited Loading

george-thomas-hill commented Mar 21, 2024

zzh8829 commented Nov 26, 2024

george-thomas-hill commented Mar 21, 2024 •

edited

Loading