React.js Firebase und Firepad Komponente

Question

Ich versuche, den Firepad Editor innerhalb meiner React Component zu starten, aber es kommt zu einem Fehler. Hier ist meine Komponente:

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 Anmeldeinformationen korrekt sind und ich sehe die ‚Probe‘ Text auf meinem Bildschirm.

Wenn ich auf localhost laufen, begegne ich diesen Fehler:

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) 

Was ich auf dem Knoten Console sehe:

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. 

Alle Ideen, wie dieses Problem zu lösen?

Answer 1

versuchen, diese Zeilen aus dem Code entfernen:

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

und ersetzt sie mit:

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

ich mehrere Stunden damit verbracht, Firepad und Codemirror in meiner React.js Anwendung zu konfigurieren und wurde mit die npm-Pakete firepad, codemirror und firebase.

Nachdem ich durch die Firepad Quellcode gegraben und diese gefunden:

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

Das hat mich aus den NPM-Pakete weg zu betrachten und es auszuprobieren durch die Skripte der Zugabe. Ich bin relativ unerfahren mit JS-Paket-Struktur (meine App ist Reaktion + Meteor), aber ich weiß, dass dies das Problem für mich behoben. Vielleicht kann jemand anderes eine bessere Erklärung geben warum das passiert.

Answer 2

Verwenden Sie diese npm packages-brace, react-ace, firebase, firepad.

Seit firepad muss ace weltweit präsent sein, weist Klammer zu global var wie (nicht die beste Art und Weise, aber funktioniert) vor 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'; 

Verwenden Import ref Instanz von ReactAce zu erhalten und initialisieren es in componentDidMount mit:

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

Ebenso für CodeMirror Editor.