title: Webpack + babel, ReferenceError: class is not defined
body: <p>I am writing my first JS library and wanted to learn to use babel and webpack.</p>
  
  <p>The problem I am having is that the class (entry point?) that I'd like to instantiate in my <code>index.htm</code> file causes the browser to complain that it's "not defined".</p>
  
  <p>This is my webpack config:</p>
  
  <pre><code>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']
                  }
              }
          ]
      },
  };
  </code></pre>
  
  <p>And the js:</p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>So in the <code>index.htm</code> file I am doing:</p>
  
  <pre><code>&lt;script src="formr-editor.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      import FormrEditor from "./formr-editor";
  
      var formr = FormrEditor(document.getElementById('editor'), {});
  &lt;/script&gt;
  </code></pre>
  
  <p>And that's when it complains that <code>FormrEditor</code> isn't defined...</p>
  
  <p><strong>A bit more info:</strong></p>
  
  <p>I am serving index.htm out of a "demo" folder, in which I have symlinks to both <code>formr-editor.js</code> (the output of webpack) and the css.</p>
  
  <p>I have also tried <code>var formr = new FormrEditor(document.getElementById('editor'), {});</code> without the <code>import</code> as per MarcRo and I still get the same error.</p>
  
  <p>I have tried both <code>export</code> and <code>export default</code> on the class and nothing...</p>