React-Firebase with webpack uncaught exception of type std::bad_alloc: std::bad_alloc

Question

I am building a React app with Firebase database and authentication, with server-side-rendering. It works fine until I initialise firebase database in the Firebase class. I believe it's because of the size of the library or something wrong with my webpack config. I am new to webpack and I couldn't find any similar issues on the internet. It's also my first question so any advice/improvements are welcome.

I run into this error when I initialise firebase database this.db = app.database();. Below is my Firebase class where I initialise everything 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;

Below is my webpack config

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'
    }),
  ]
};

Below is my server.ts where I start the node server and create a Firebase instance.

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}!`));

I am using nodemon to watch server code changes and it crashes while restarting giving me the error below:

[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...

React-Firebase with webpack uncaught exception of type std::bad_alloc: std::bad_alloc

0 Answers