React.js Firebase and Firepad Component

Question

React Component 내에서 Firepad Editor를 회전하려고하는데 오류가 발생합니다. 여기에 내 구성 요소가 있습니다 :

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

내 Firebase 자격 증명이 정확하며 화면에 '테스트'텍스트가 표시됩니다.

내가 로컬 호스트에서 실행, 나는이 오류가 발생 :

내 노드 콘솔에보고하고 무엇

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) 

:이 문제를 해결하는 방법에 대한

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. 

어떤 아이디어가?

Answer 1

봅니다 코드에서이 줄 제거 :

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

와로 대체 :

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

내 React.js 응용 프로그램에서 Firepad 및 CodeMirror를 구성하려고 몇 시간을 소비하고 사용하고 있었다 npm 패키지 firepad, codemirror 및 firebase.

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

이 저 멀리 NPM 패키지에서 이동과에 스크립트를 추가하여 시도 고려했다 : 나는 firepad 소스 코드를 파고 이걸 발견 한 후

. 나는 상대적으로 JS 패키지 구조에 익숙하지 않다. (내 앱은 반응 + 유성이다.)하지만이 문제가 해결되었다는 것을 알고있다. 아마도 다른 사람이 의 이유에 대해 더 잘 설명 할 수 있습니다. 이유는입니다.

Answer 2

사용이 npm packages-brace, react-ace, firebase, firepad. firepad 이후

는 ReactAce의 인스턴스를 얻고 그것을 초기화 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'; 

사용 ref를 가져 오기 전에, 전 세계적으로 존재처럼 글로벌 VAR 에 중괄호를 할당 ace을 필요로 (가장 좋은 방법은 아니지만, 작동) componentDidMount 사용 :

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

마찬가지로 편집기 CodeMirror을 위해.