Firebase/auth 导入源地图警告

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.

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

Answer 2

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

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

Answer 3

if(react / package.json / react-scripts >= ^5.0) {
  
  [ downgrade ]
  react-scripts -> ^4.0.3

  npm install react-scripts@4
  
}

Answer 4

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

Answer 5

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