Firebase/auth import source-map warnings

Question

I am building a react app with firebase library v7.15.5 and when I'm importing 'firebase/auth', it works fine but it throws me warnings in a terminal:

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:es6\promise\promise] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:es6\promise\promise] '
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./src/utils/firebase/firebase.ts
 @ ./src/store/actions/appProps/index.ts
 @ ./src/pages/schedule/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:es6\util\arrayiterator] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:es6\util\arrayiterator] '
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./src/utils/firebase/firebase.ts
 @ ./src/store/actions/appProps/index.ts
 @ ./src/pages/schedule/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:es6\util\makeiterator] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:es6\util\makeiterator] '
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./src/utils/firebase/firebase.ts
 @ ./src/store/actions/appProps/index.ts
 @ ./src/pages/schedule/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:util\defineproperty] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:util\defineproperty] '
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./src/utils/firebase/firebase.ts
 @ ./src/store/actions/appProps/index.ts
 @ ./src/pages/schedule/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:util\global] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:util\global] '
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./src/utils/firebase/firebase.ts
 @ ./src/store/actions/appProps/index.ts
 @ ./src/pages/schedule/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./node_modules/@firebase/auth/dist/auth.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:util\polyfill] ' file: Error: ENOENT: no such file or directory, open 'D:\Projects\DeparturesSchedule\node_modules\@firebase\auth\dist\ [synthetic:util\polyfill] '
 @ ./node_modules/firebase/auth/dist/index.esm.js 1:0-24
 @ ./src/utils/firebase/firebase.ts
 @ ./src/store/actions/appProps/index.ts
 @ ./src/pages/schedule/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
i ｢wdm｣: Compiled with warnings.

This is the code of the file, where I initialize firebase modules:

import app from 'firebase/app';
import 'firebase/database';
import 'firebase/auth';

const config = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DB_URL,
  storageBucket: process.env.STORAGE_BUCKET,
};

app.initializeApp(config);

const database = app.database();
const auth = app.auth();

export { database, auth };

Tried to remove node_modules and reinstall all, but it doesn't solve the problem. Maybe I should import it in a different way or configure webpack or tsconfig? I don't know.

Thanks for help.

Hyaloplasm

Answer 1

If you absolutely need the source-maps (which i don't think you really do since your solution was to disable them), you can add an exclude rule for firebase (or just firebase/auth). Example (building on your own):

{
    enforce: "pre",
    test: /\.js$/,
    loader: "source-map-loader",
    exclude: /node_modules\/@firebase/ //to exclude firebase from source-map
    exclude: /node_modules\/@firebase\/auth/ //to just exclude firebase auth from source-map
  },

Note: only use one of the exclude rules above

Foil

what file is this? – Orsola

Webpack config. – Foil

Answer 2

Upgrading the firebase version to 9 fixed it for us.

Note, will have to update to use the compat packages:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Aerobatics

Answer 3

If u don't want to see this warnings anymore a possible solution is add this fix editing the file node_modules/react-scripts/config/webpack.config.js, and pasting this after the line performance: false,

    ignoreWarnings: [
      // Ignore warnings raised by source-map-loader.
      // some third party packages may ship miss-configured sourcemaps, that interrupts the build
      // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
      /**
       *
       * @param {import('webpack').WebpackError} warning
       * @returns {boolean}
       */
      function ignoreSourcemapsloaderWarnings(warning) {
        return (
          warning.module &&
          warning.module.resource.includes('node_modules') &&
          warning.details &&
          warning.details.includes('source-map-loader')
        );
      },
    ],

i found this on https://github.com/facebook/create-react-app/pull/11752#issuecomment-1146687183

Ulani

Answer 4

As I investigated these warnings, I noticed some of them mentioned polyfills (although not all). Older webpack versions used to include polyfills for node.js core modules by default. From webpack 5 this is not the case. This may be related to these warnings.

Reference: https://github.com/facebook/create-react-app/issues/11756

In my case, using webpack 4 instead of webpack 5 got rid of the warnings and did not break anything. This may be a solution, as long as your code does not require webpage 5+.

If you want to try this solution, you need to:

1. Remove the following dependency from your package.json: "react-scripts": "5.0.0", (your version may be higher)

2. Add the following dependency to your package.json: "react-scripts": "4.0.3",

3. Delete your node_modules folder

4. Run npm install

Sulfonal

This cause another problems with ES modules versions. I suggest you to edit this post – Slipover

Answer 5

Solved the problem by removing these lines of code from webpack.config

{
    enforce: "pre",
    test: /\.js$/,
    loader: "source-map-loader"
  },

Hyaloplasm

So, you just disabled the source-map loader? – Foil

@Foil yeah, I think maybe there is another way to solve this, but it worked for me – Hyaloplasm