"Uncaught TypeError" when using slim-js with @babel/preset-env

[bannmoore]

If I use slim-js and @babel/preset-env in a webpack project, the resulting bundled code throws a console error: Uncaught TypeError: Class constructor Slim cannot be invoked without 'new'.

This is the slim code that is transpiled by Babel:

import { Slim } from 'slim-js'

export default Slim.tag(
  'my-tag',
  '<div>Hello, i am a custom element</div>',
  class MyTag extends Slim {
    onAdded () {
      console.log('slim-js component added successfully')
    }
  })

Please see the demo repository that reproduces the issue.

It's possible that this is related to babel/babel#9367, but I'm not sure. 🤷‍♀

[eavichay]

All web components suffer from this, native or via library.
Please refer to https://github.com/slimjs/slim-webpack-boilerplate. The babel config file uses class properties plug-in and in index.html the web components polyfill is loaded.
Unfortunately with babel transpiled to es5 you must use the polyfill.

[eavichay]

If you are addressing modern browsers that support custom elements without polyfill, then you may want to ditch babel. Consider working with rollup targeted as es6 modules.

[bannmoore]

Thanks for responding @eavichay .

For anyone else who comes across this, the polyfill did not resolve this specific problem (although it will be needed for older browsers). I was getting the above error in browsers that support the web components specification.

In order to use the latest slim-js in a project using @babel/preset-env, I needed to include it in the code transpiled through Babel and specifically call out the configuration in the rule options:

webpack.config.js:

      // module.rules
      {
        test: /\.js$/,
        exclude: /(node_modules(?!\/slim-js\/))/,
        use: {
          loader: 'babel-loader',
          options: {
            configFile: path.join(__dirname, '.babelrc')
          }
        }
      }

Since this fixes the eerror, I'll close this issue. Thanks again! 😄

[eavichay]

If you wish to start fresh PWA project based on slim-js, with typescript support (optional), sass/HTML/image loading via import, type npm init slimjs myProjectFolder