sparksuite / simplemde-markdown-editor

A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://simplemde.com
MIT License
9.8k stars 1.12k forks source link

CodeMirror.commands undefined error when using SimpleMDE with Webpack #738

Open marcuslind90 opened 5 years ago

marcuslind90 commented 5 years ago

I've installed simplemde using npm install --save simplemde and I can confirm that my lock file install the dependencies such as codemirror.

When I then go to my .js file and use import { SimpleMDE } from "simplemde" my browser console raise CodeMirror.commands is undefined. I don't even instantiate an instance of the class, as soon as I import it this error is raised.

I use webpack to bundle my files a simple Webpack config:

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,
    mode: "development",
    entry: {
        'main': './assets/js/index', 
    },

    output: {
        publicPath: '/static/bundles/',
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    "babel-loader",
                ]
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'file-loader',
                options: { limit: 1000, name: 'fonts/[name].[ext]', },
            }
        ],
    },

    resolve: {
        extensions: ['.css', '.scss', '.js', '.jsx']
    },
}