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凭据是正确的，我看到了＆＃39;测试＆＃39;我的屏幕上的文字。

当我在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)

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

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

问题在于，如果您在类的顶部导入或要求使用全局变量，则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>;
};

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。

在我挖掘了防火垫源代码后发现了这个：

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包结构相对缺乏经验（我的应用程序是反应+流星）但我知道这解决了我的问题。也许其他人可以更好地解释为什么这种情况正在发生。

Answer 3

使用这些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编辑器类似。

React.js Firebase和Firepad组件

3 个答案: