React.js Firebase и Firepad Component

Question

React.js Firebase и Firepad Component

Я пытаюсь раскрутить Редактор Firepad внутри моего React Component, но я сталкиваюсь с ошибкой. Вот мой компонент:

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.

Есть идеи, как решить эту проблему?

3

javascript reactjs firebase firepad

Источник

user7959412 03 май '17 в 18:59

2 ответа

Другие вопросы по тегам javascript reactjs firebase firepad

user1869832 09 дек '17 в 07:38 2017-12-09 07:38 · Answer 1 · 2017-12-09 07:38

Используйте эти 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 редактор.

user142098 14 фев '20 в 09:01 2020-02-14 09:01 · Answer 2 · 2020-02-14 09:01

Проблема в том, что 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>;
};

user781264 19 май '17 в 00:01 2017-05-19 00:01 · Answer 3 · 2017-05-19 00:01

Попробуйте удалить эти строки из вашего кода:

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 (мое приложение реагирует + метеор), но я знаю, что это решило проблему для меня. Возможно, кто-то еще может дать лучшее объяснение того, почему это происходит.