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凭据是正确的，并且我在屏幕上看到了“测试”文本。

当我在localhost上运行时，我遇到了这个错误：

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)

我在Node控制台上看到的内容：

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

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

由于firepad需要ace全局存在，因此在导入firepad之前，将brace分配给全局var like(不是最好的方法，但很有效

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编辑器也是如此。

Answer 2

尝试从您的代码中删除以下代码行：

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。

在我深入研究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 3

问题是，当您设置全局变量时，Firepad已经加载了对CodeMirror的引用(如果您在类的顶部导入或需要它)。

如果在设置窗口变量后使用require Firepad，它可以正常工作：

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