Webpack + babel, ReferenceError: class is not defined

Question

I am writing my first JS library and wanted to learn to use babel and webpack.

The problem I am having is that the class (entry point?) that I'd like to instantiate in my index.htm file causes the browser to complain that it's "not defined".

This is my webpack config:

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/js/FormrEditor.js'),
    output: {
        filename: 'formr-editor.js',
        path: path.resolve(__dirname, 'dist/js'),
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/',
                query: {
                    presets: ['@babel/env']
                }
            }
        ]
    },
};

And the js:

import {Toolbox, ToolboxItem} from "./Toolbox";

export default class FormrEditor{
    constructor(element, config){

        /** Find the element to use as the container */
        if(element instanceof Element)
            this.container = element;
        else
            this.container = document.getElementById(element);

        this.container.classList.add("feditor")

        this.buildEditorDom();
    }

    buildEditorDom()
    {
        let form = document.createElement("div");
        form.classList.add("feditor-form");

        let toolbox = document.createElement("div");
        toolbox.classList.add("feditor-toolbox");

        let handle = document.createElement("div");
        handle.classList.add("feditor-toolbox-handle");

        let testItem = document.createElement("div");
        testItem.classList.add("feditor-toolbox-item");

        toolbox.appendChild(handle);
        toolbox.appendChild(testItem);

        this.container.appendChild(form);
        this.container.appendChild(toolbox);

        this.toolbox = new Toolbox(toolbox);
        this.form = form;
    }
}

So in the index.htm file I am doing:

<script src="formr-editor.js"></script>
<script>
    import FormrEditor from "./formr-editor";

    var formr = FormrEditor(document.getElementById('editor'), {});
</script>

And that's when it complains that FormrEditor isn't defined...

A bit more info:

I am serving index.htm out of a "demo" folder, in which I have symlinks to both formr-editor.js (the output of webpack) and the css.

I have also tried var formr = new FormrEditor(document.getElementById('editor'), {}); without the import as per MarcRo and I still get the same error.

I have tried both export and export default on the class and nothing...

Answer 1

There are a few things you might want to check.

1. You cannot use ES6 imports in the browser like this - actually the import statement is entirely unnecessary.

2. Your <script src="formr-editor"> seems like it has the wrong path. Your webpacks output is generating a file at dist/js/formr-editor.js. if you want to import the untranspiled src file in your Browser use <script src="src..." type="module"> - make sure the untranspiled file is also accessible.

3. How are you serving public assets? Is your formr-editor.js file (generated by webpacks) accessible?

4. You want to call your FormrEditor class with the new keyword.

Note: you can check in your Browsers dev-tools whether your Browser manages to load the respective files!