CodeMirror nie działa z reagowaniem/pakietem WWW

Question

Pracuję nad edytorem przecinków dla mojego projektu reakcji. Chcę używać CodeMirror jako edytora kodu, ale wygląda na to, że nie działa, gdy buduję go za pomocą pakietu internetowego.

Jeśli mam być szczery, CodeMirror są w DOM-drzewa, textarea jest ukryta, ale wszystko co widzę to:

i

UPD: Ten sam kod działa idealnie na codepen. Domyślam się, że to problem z webpakiem.

Część kodu:

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import {Editor} from './components'; 

const rootElement = document.getElementById('root'); 

ReactDOM.render(<Editor />, rootElement); 

elementy/editor.js

import React, { Component } from 'react'; 
import cm from 'codemirror'; 
require('codemirror/mode/markdown/markdown'); 

export class App extends Component { 
    componentDidMount() { 
    this.codeMirror = cm.fromTextArea(this.refs.editor, {mode: 'markdown'}) 
    } 
    render() { 
    return (
     <div> 
     <textarea ref='editor' autoComplete='off' defaultValue='default value' /> 
     </div> 
    ); 
    } 
} 

server.js

var path = require('path'); 
var express = require('express'); 
var webpack = require('webpack'); 
var config = require('./webpack.config.dev'); 

var HOST = 'localhost'; 
var PORT = 3000; 

var app = express(); 
var compiler = webpack(config); 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 


app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, '/app/index.html')); 
}); 

app.listen(PORT, HOST, function(err) { 
    if (err) { 
    console.log(err); 
    return; 
    } 

    console.log('Listening at http://' + HOST + ':' + PORT); 
}); 

i webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './app/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'app') 
    }] 
    } 
}; 

Answer 1

W webpack gitter chat@bebraw odpowiedział na moje pytanie:

CodeMirror współpracuje z WebPacka ale to zabiera trochę dodatkowej konfiguracji. potrzebujesz , aby przywieźć trochę css itp. do renderowania. example