Webpack: How to export directly to global (without .default) containing stylesheet imports?

Question

Context

I have a webpack.config.js like this:

/* Something here */

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    library: 'MyClass',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'lib'),
    filename: `package.js`
  },
  ...
}

My ./src/index.js looks like this:

import MyClass from 'src/myClass'
import 'src/myStyle.css'

export default MyClass

Problem

While this works fine, it exposes MyClass class to window object as:

console.log(window.MyClass)
=> Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"}

This way, I cannot invoke my class by using:

new MyClass();
=> TypeError: Slidery is not a constructor

I have to invoke it like:

new MyClass.default();
=> MyClass { ... }

I can solve the problem by doing something like this in my ./src/index.js :

const MyClass = require('src/myClass')
module.exports = MyClass

/* in browser */
new MyClass()
=> Good, works fine

However, this way, I cannot import my stylesheet:

const MyClass = require('src/myClass')
import 'src/myStyle.css'

module.exports = MyClass
=> TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Edit

The following way also solves the problem, but is done without an export :

/* webpack.config.js */
module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    /* Need to remove library related props */
    // library: 'MyClass',
    // libraryTarget: 'window',
    path: path.resolve(__dirname, 'lib'),
    filename: `package.js`
  },
  ...
}

/* ./src/index.js */
import MyClass from 'src/myClass'
import 'src/myStyle.css'

window.MyClass = MyClass

Question

Is there a way in Webpack for me to export a module directly to global without having to invoke with .default and at the same time import a stylesheet in the entry file?

Answer 1

Use output.libraryExport in your webpack.config.js . ( ref )

Along with output.libraryTarget set to umd , output.libraryExport tells Webpack which property to be exported as the global variable named by the output.library .

In your case, in addition to your original configuration, set output.libraryExport to default is equivalence to append the following snippet after your compiled code.

window.MyClass /*output.library*/ = module.exports.default /*output.libraryExport*/

The configuration will be as follows.

/* Something here */

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    library: 'MyClass',
    libraryTarget: 'umd',
    libraryExport: 'default',  // export the default as window.MyClass
    path: path.resolve(__dirname, 'lib'),
    filename: `package.js`
  }
}

Have a try in the console.

> window.MyClass
class {...}

Answer 2

If your script is only designed to run in the web browser only why not just update window explicitly:

import MyClass from 'src/myClass'
import 'src/myStyle.css'

window.MyClass = MyClass;

I think this is a lot clearer than using indirection.