javascript - React-Firebase 与 webpack 未捕获的 std::bad_alloc 类型的异常：std::bad_alloc

Question

我正在使用 Firebase 数据库和身份验证以及服务器端渲染构建一个 React 应用程序。它工作正常，直到我在Firebase课堂上初始化 firebase 数据库。我相信这是因为库的大小或我的 webpack 配置有问题。我是 webpack 的新手，在互联网上找不到任何类似的问题。这也是我的第一个问题，因此欢迎任何建议/改进。

我在初始化 firebase database 时遇到了这个错误this.db = app.database();。下面是我的 Firebase 类，我在其中初始化了所有 Firebase。

   
var app = require('firebase/app');
require('firebase/auth');
require('firebase/database');
import { FB_CONFIG } from '..';

class Firebase {
    serverValue: any;
    emailAuthProvider: any;
    googleProvider: any;
    facebookProvider: any;
    twitterProvider: any;
    auth: any;
    db: any;
    user: any;
    constructor() {
        app.initializeApp(FB_CONFIG); // FB_CONFIG is an exported const of the config object

        /* Helper */

        this.serverValue = app.database.ServerValue;
        this.emailAuthProvider = app.auth.EmailAuthProvider;

        /* Firebase APIs */

        this.auth = app.auth();
        this.db = app.database();

        /* Social Sign In Method Provider */

        this.googleProvider = new app.auth.GoogleAuthProvider();
        this.facebookProvider = new app.auth.FacebookAuthProvider();
        this.twitterProvider = new app.auth.TwitterAuthProvider();
    }
}

export default Firebase;

下面是我的 webpack 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
  entry: {
    main: './src/client/index.tsx',
  },
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass'),
            },
          },
        ],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  resolve: {
    extensions: ['*', '.tsx', '.ts', '.js', '.jsx']
  },
  devServer: {
    port: 3000,
    open: false,
    historyApiFallback: true,
    proxy: {
      // '/api': 'http://localhost:8080'
    }
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/img/_favicon/favicon.ico'
    }),
  ]
};

下面是我的 server.ts，我在其中启动节点服务器并创建 Firebase 实例。

import Firebase from "./services/Firebase";
const express = require('express');
const os = require('os');
const dotenv = require('dotenv');

dotenv.config();
const app = express();

export const FB_CONFIG = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID,
};

const database = new Firebase();
var data: any, isDataLoaded: boolean;

app.use(express.static('dist'));
app.get('/', (req, res) => res.send({ username: os.userInfo().username }));

app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));

我nodemon用来观察服务器代码更改，它在重新启动时崩溃，给我以下错误：

[0] libc++abi.dylib: terminating with uncaught exception of type std::bad_alloc: std::bad_alloc
[0] [nodemon] app crashed - waiting for file changes before starting...

标签： javascripthtmlnode.jsfirebasewebpack