我正在使用 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?我不知道。
感谢您的帮助。
如果您绝对需要源映射(我不认为您真的需要,因为您的解决方案是禁用它们),您可以为 firebase(或只是 firebase/auth)添加一个exclude rule。示例(自行构建):
{
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
},
注意: 只使用上面的排除规则之一
如果您不想再看到此警告,可能的解决方案是添加此修复程序编辑文件 node_modules/react-scripts/config/webpack.config.js,并将其粘贴到行 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')
);
},
],
我在https://github.com/facebook/create-react-app/pull/11752#issuecomment-1146687183
上找到了这个将 firebase 版本升级到 9 为我们修复了它。
注意,必须更新才能使用兼容包:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
当我调查这些警告时,我注意到其中一些提到了 polyfill(虽然不是全部)。较旧的 webpack 版本默认包含 node.js 核心模块的 polyfill。从 webpack 5 开始,情况就不是这样了。这可能与这些警告有关。
参考:https://github.com/facebook/create-react-app/issues/11756
在我的例子中,使用 webpack 4 而不是 webpack 5 摆脱了警告并且没有破坏任何东西。这可能是一个解决方案,只要您的代码不需要网页 5+。
如果你想尝试这个解决方案,你需要:
从 package.json 中删除以下依赖项: “反应脚本”:“5.0.0”, (你的版本可能更高)
将以下依赖项添加到您的 package.json: “反应脚本”:“4.0.3”,
删除您的 node_modules 文件夹
运行 npm 安装
首先,去存储, https://console.firebase.google.com/project/
选择您的项目名称
然后去存储
然后
规则选项卡和更改允许读取、写入:如果为假;为真;如下所示。
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
更多了解 看图片
通过从 webpack.config 中删除这些代码行来解决问题
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},