react-codemirror2
                                
                                 react-codemirror2 copied to clipboard
                                
                                    react-codemirror2 copied to clipboard
                            
                            
                            
                        Uncaught TypeError: place is not a function
I'm trying to use this library but I get this error:
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)
I'm using it in a React app, nothing fancy as I didn't even manage to get past the sample code.
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) => {
			}}
		/>;
	}
}
My webpack config (in case it matters):
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'
			}
		}
	})
};
@ciokan I am a lot shorter on time these days as when I started this project. Codemirror & React APIs are moving to quickly for me to keep atop of for the day-to-day. I am looking for a co-maintainer of this project. Please contact me directly if you are interested. Thank you for understanding.