我正在尝试在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.
关于如何解决此问题的任何想法？
最佳答案
使用这些npm packages-brace，react-ace，firebase和firepad。
由于firepad需要ace全局存在，因此将大括号分配给全局var
导入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编辑器也是如此。