React.js Firebase and Firepad Component

Related searches

I am trying to spin up the Firepad Editor inside of my React Component, but I am encountering an error. Here is my Component:

import React, { Component } from 'react';
import * as firebase from 'firebase';
import CodeMirror from 'codemirror';
import Firepad from 'firepad';

export default class FirePadEditor extends Component {
  constructor() {
    super();
    firebase.initializeApp({
      apiKey: "AIzaSyCDre_vyeiK1a0qA8XSecI4elbF3hlobjc",
      authDomain: "firepad-test-d4679.firebaseapp.com",
      databaseURL: "https://firepad-test-d4679.firebaseio.com",
      projectId: "firepad-test-d4679",
      storageBucket: "firepad-test-d4679.appspot.com",
      messagingSenderId: "585682717429"
    });
  }

  componentDidMount() {
    var firepadRef = firebase.database().ref();
    var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
    var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
            richTextShortcuts: true,
            richTextToolbar: true,
            defaultText: 'Hello, World!'
          });
  }

    render() {
    return (
      <div>
        <div>testing</div>
        <div id='firepad'></div>
      </div>
  )
  }
}

My Firebase credentials are correct and I am seeing the 'testing' text on my screen.

When I run on localhost, I encounter this error:

Uncaught TypeError: p is not a constructor
    at new c (bundle.js:30211)
    at Function.c (bundle.js:30211)
    at FirePadEditor.componentDidMount (bundle.js:19892)
    at CallbackQueue.notifyAll (bundle.js:6516)
    at ReactReconcileTransaction.close (bundle.js:16274)
    at ReactReconcileTransaction.closeAll (bundle.js:6877)
    at ReactReconcileTransaction.perform (bundle.js:6824)
    at batchedMountComponentIntoNode (bundle.js:2724)
    at ReactDefaultBatchingStrategyTransaction.perform (bundle.js:6811)
    at Object.batchedUpdates (bundle.js:10848)

What I am seeing on my Node Console:

WARNING in ./~/firepad/dist/firepad.min.js
Critical dependencies:
14:3292-3299 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/firepad/dist/firepad.min.js 14:3292-3299

WARNING in ./~/firepad/dist/firepad.css
Module parse failed: /Users/Air/Desktop/firepad/firepad/node_modules/firepad/dist/firepad.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
 @ ./~/firepad/dist ^\.\/.*$

WARNING in ./~/firepad/dist/firepad.eot
Module parse failed: /Users/Air/Desktop/firepad/firepad/node_modules/firepad/dist/firepad.eot Unexpected character '' (1:1)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:1)
    at Parser.pp$4.raise (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseLiteral (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1830:10)
    at Parser.pp$3.parseExprAtom (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1786:19)
    at Parser.pp$3.parseExprSubscripts (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/Air/Desktop/firepad/firepad/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
 @ ./~/firepad/dist ^\.\/.*$

WARNING in ./~/firepad/dist/firepad.js
Critical dependencies:
2463:61-68 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/firepad/dist/firepad.js 2463:61-68
webpack: Compiled with warnings.

Any ideas on how to solve this problem?


Use these npm packages - brace, react-ace, firebase, firepad.

Since firepad needs aceto be present globally, assign brace to global var like(not the best way, but works) before importing firepad

import firebase from 'firebase/app';
import 'firebase/database';
import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';

Use ref to get instance of ReactAce and initialize it in componentDidMount using:

new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);

Similarly for CodeMirror editor.

robertreppel/hello-react-firepad: React + Firepad , React + Firepad collaborative editing hello-world. Firepad Collaborative Editing React Component Hello-World. Sign up and/or log into Firebase and create a project. JavaScript 71.9% � HTML 22.6% � CSS 5.5%. WHAT IS REACT JS? React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. WHAT IS FIREBASE? Firebase provides a realtime database and backend as a service.


Try removing these lines from your code:

import * as firebase from 'firebase';
import CodeMirror from 'codemirror';
import Firepad from 'firepad';

and replacing them with:

<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css" />

<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
<script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>

I spent several hours trying to configure Firepad and CodeMirror in my React.js application and was using the npm packages firepad, codemirror and firebase.

After I dug through the firepad source code and found this:

var CodeMirror = global.CodeMirror;
  var ace = global.ace;

  function Firepad(ref, place, options) {
    if (!(this instanceof Firepad)) { return new Firepad(ref, place, options); }

    if (!CodeMirror && !ace) {
      throw new Error('Couldn\'t find CodeMirror or ACE.  Did you forget to include codemirror.js or ace.js?');
    }

This made me consider moving away from the NPM packages and trying it out by adding the scripts to the . I am relatively inexperienced with JS package structure (my app is react + meteor) but I do know that this fixed the issue for me. Perhaps someone else can give a better explanation of why this is happening.

How can I make a reactjs firepad component?, Anyone have any experience with react and firepad? I read in the reactfire docs that it's one way binding from firebase to my site, which for my� React and Firebase development made easy. Don't worry about data subscription management, just set the path to your data.


The problem is that Firepad has already loaded a reference to CodeMirror by the time you set the global variable, if you import or require it at the top of your class.

If you require Firepad after you set the window variable, it works fine:

import React, { useRef, useEffect } from "react";
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";

export const FirepadComponent = () => {
  const editorRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
      const codeMirror = CodeMirror(editorRef.current);
      window.CodeMirror = CodeMirror;
      const Firepad = require("firepad");
      const firepadRef = database.ref();
      Firepad.fromCodeMirror(firepadRef, codeMirror);
    }
  });

  return <div id="codemirror" ref={editorRef}></div>;
};

Package, For example: yo react-firebase:component Car routes/Project runs the Generates a React component along with an option matching style file (either Javascript or devshare.io - Codesharing site based on Firebase's Firepad and Realtime� Firebase Database Mutation. The FirebaseDatabaseMutation allows you to render components that run Firebase mutations (update, set, push).. A setMutation function that returns a promise is provided to the children function.


React.js Firebase и Firepad Component – 2 Ответа, Используйте эти npm packages - brace, react-ace, firebase, firepad. Поскольку firepad потребности Вопрос по теме: javascript, reactjs, firebase, firepad. Click the publish button to update or save the changes. Now, the Google Firebase realtime database is ready to use with your React JS web app. Step #2: Create React JS App. To create a new React JS application, we will use the create-react-app tool. The create-react-app is a tool to create a React JS app from the command line or CLI.


firepad, Firepad uses Firebase as a backend, so it requires no server-side code. It can be added to any web app by including a few JavaScript files:. You may be wondering why we are using firebase in this application. Well, it provides secure Authentication, a Real-time database, a Serverless Component, and a Storage bucket. We are using Express here so that we don't need to handle HTTP Exceptions. We are going to use all the firebase packages in our functions component.


FIREBASE is a BAAS (backend as a service) that provides many useful tools for mobile and web development. In its offer, we can find Hosting (even for node apps), real-time database (what we are