Я пытаюсь использовать эту библиотеку (реагировать-codemirror2), но получаю эту ошибку:
Uncaught TypeError: place is not a function
at new Display (codemirror.js:4361)
at new CodeMirror (codemirror.js:7850)
at CodeMirror (codemirror.js:7838)
at UnControlled.componentDidMount (index.js:675)
at commitLifeCycles (react-reconciler.development.js:9317)
at commitAllLifeCycles (react-reconciler.development.js:10719)
at HTMLUnknownElement.callCallback (react-reconciler.development.js:2234)
at Object.invokeGuardedCallbackDev (react-reconciler.development.js:2284)
at invokeGuardedCallback (react-reconciler.development.js:2337)
at commitRoot (react-reconciler.development.js:10931)
Я использую ее в приложении React, ничего особенного, так как я даже не справилсячтобы пройти образец кода.
import * as React from 'react';
import CM from 'codemirror';
import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
require('codemirror/mode/javascript/javascript');
interface CodeEditorProps {
}
interface CodeEditorState {
src: string;
}
export default class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
constructor(props) {
super(props);
this.state = {
src: ''
};
}
render() {
let option = {
mode : 'javascript',
theme: 'material'
};
return <CodeMirror
value='<h1>I ♥ react-codemirror2</h1>'
options={{
mode : 'javascript',
theme : 'material',
lineNumbers: true
}}
onChange={(editor, data, value) => {
}}
/>;
}
}
Мой конфиг веб-пакета (на случай, если это имеет значение):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {BaseHrefWebpackPlugin} = require('base-href-webpack-plugin');
const ExtWebpackPlugin = require('@sencha/ext-webpack-plugin');
const portfinder = require('portfinder');
module.exports = function (env) {
function get(it, val) {
if (env === undefined) {
return val
} else if (env[it] === undefined) {
return val
} else {
return env[it]
}
}
const contextFolder = get('contextFolder', './src');
const entryFile = get('entryFile', './index.js');
const outputFolder = get('outputFolder', 'build');
const framework = get('framework', 'react');
const toolkit = get('toolkit', 'modern');
const theme = get('theme', 'theme-material');
const packages = get('packages', ['treegrid']);
const script = get('script', '');
const emit = get('emit', 'yes');
const profile = get('profile', '');
const environment = get('environment', 'development');
const treeshake = get('treeshake', 'no');
const browser = get('browser', 'yes');
const watch = get('watch', 'yes');
const verbose = get('verbose', 'no');
const basehref = get('basehref', '/');
const isProd = environment === 'production';
portfinder.basePort = (env && env.port) || 1962;
return portfinder.getPortPromise().then(port => {
const plugins = [
new HtmlWebpackPlugin({template: "index.html", hash: true, inject: "body"}),
new BaseHrefWebpackPlugin({baseHref: basehref}),
new ExtWebpackPlugin({
framework : framework,
toolkit : toolkit,
theme : theme,
packages : ['treegrid', 'renderercell'],
script : script,
emit : emit,
port : port,
profile : profile,
environment: environment,
treeshake : treeshake,
browser : browser,
watch : watch,
verbose : verbose
})
];
const rules = [
{test: /\.ext-reactrc$/, use: 'raw-loader'},
{test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader']},
{
test : /\.(ts|tsx)$/,
exclude: /node_modules/,
use : [
{
loader : 'babel-loader',
options: {
"plugins": [
"@sencha/ext-react-babel-plugin"
]
}
},
{
loader: 'awesome-typescript-loader'
}
]
},
{test: /\.(html)$/, use: {loader: 'html-loader'}},
{
test: /\.(css|scss)$/,
use : [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'sass-loader'}
]
}
];
return {
resolve : {
alias : {
//'react-dom': '@hot-loader/react-dom'
react: path.resolve('./node_modules/react')
},
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
mode : environment,
devtool : (environment === 'development') ? 'inline-source-map' : false,
context : path.join(__dirname, contextFolder),
entry : entryFile,
output : {
path : path.join(__dirname, outputFolder),
filename: "[name].js"
},
plugins : plugins,
module : {
rules: rules
},
performance : {hints: false},
stats : 'none',
optimization: {noEmitOnErrors: true},
node : false,
devServer : {
contentBase : outputFolder,
hot : !isProd,
historyApiFallback: true,
host : '0.0.0.0',
port : port,
disableHostCheck : false,
compress : isProd,
inline : !isProd,
stats : 'none'
}
}
})
};