scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.66k stars 193 forks source link

Uncaught TypeError: place is not a function #156

Open ciokan opened 5 years ago

ciokan commented 5 years ago

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'
            }
        }
    })
};
scniro commented 4 years ago

@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.