[英]FireBase getAuth and onAuthStateChanged is not in "firebase/auth" import
[英]Firebase/auth import source-map warnings
我正在使用 firebase 库 v7.15.5 构建一个反应应用程序,当我导入“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)添加排除规则。 示例(自行构建):
{
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
},
注意:仅使用上述排除规则之一
通过从 webpack.config 中删除这些代码行解决了问题
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
if(react / package.json / react-scripts >= ^5.0) {
[ downgrade ]
react-scripts -> ^4.0.3
npm install react-scripts@4
}
如果您不想再看到此警告,可能的解决方案是添加此修复程序,编辑文件 node_modules/react-scripts/config/webpack.config.js,并将其粘贴在行性能之后: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上找到了这个
当我调查这些警告时,我注意到其中一些提到了 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 安装
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.