React.js Firebase和Firepad组件

Question

我想旋转我的React组件中的Firepad编辑器，但遇到错误。这里是我的组件：

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> 

我花了几个小时尝试配置Firepad和CodeMirror在我React.js应用和使用npm包装firepad,codemirror和firebase。

我通过firepad源代码挖出，发现在此之后：

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包离开，并通过添加脚本的想出来。我对JS包结构（我的应用程序是react + meteor）相对缺乏经验，但我确实知道这解决了我的问题。也许别人可以给出更好的解释为什么这种情况正在发生。

Answer 2

使用这些npm packages-brace, react-ace, firebase,firepad。

由于firepad需要ace是目前全球范围内，指定捆带全局变量 一样（不是最好的方式，但工程）进口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得到的ReactAce实例，并在初始化之前componentDidMount使用：

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

同样，对于CodeMirror编辑器。