Firebase/auth 导入源映射警告

Question

我正在使用 firebase 库 v7.15.5 构建一个 React 应用程序，当我导入时 'firebase/auth'，它工作正常，但它在终端中向我发出警告：

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.

这是我初始化 firebase 模块的文件代码：

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 };

尝试删除 node_modules 并重新安装，但没有解决问题。也许我应该以不同的方式导入它或配置 webpack 或 tsconfig？我不知道。

感谢您的帮助。

Answer 1

通过从 webpack.config

中删除这些代码行解决了问题

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

Answer 2

如果您绝对需要 source-maps（我不认为您真的需要，因为您的解决方案是禁用它们），您可以为 firebase 添加一个 exclude rule（或者只是 firebase/auth).示例（自行构建）：

{
    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
  },

注意：只使用上面的排除规则之一

Answer 3

当我调查这些警告时，我注意到其中一些提到了 polyfill（虽然不是全部）。默认情况下，较旧的 webpack 版本过去常常包含 node.js 核心模块的 polyfill。从 webpack 5 开始，情况就不是这样了。这可能与这些警告有关。

参考：https://github.com/facebook/create-react-app/issues/11756

在我的例子中，使用 webpack 4 而不是 webpack 5 摆脱了警告并且没有破坏任何东西。这可能是一个解决方案，只要您的代码不需要网页 5+。

如果您想尝试此解决方案，您需要：

从您的 package.json 中删除以下依赖项： "react-scripts": "5.0.0", （您的版本可能更高）
将以下依赖项添加到您的 package.json： "react-scripts": "4.0.3",
删除您的 node_modules 文件夹
运行 npm 安装

Firebase/auth 导入源映射警告

Firebase/auth import source-map warnings

javascript

import

warnings

firebase

source-maps