HELP.md

TROUBLE SHOOTING

Class Name Mangling

To avoid class name mangling issues, we recommend using the second parameter in Tonic.add method:

Tonic.add(MyComponent, 'my-component')

---

If you are using Uglify (or something similar), it will mangle your class names. To fix this, just pass the keep_fnames option babel-minify has something similar.

new UglifyJsPlugin({
  uglifyOptions: {
    keep_fnames: true
  },
  extractComments: true,
  parallel: true
})

Webpack 4+ Mangling Error

If you get an error in the JS console around mangling it can likely be fixed. With Webpack 4+, minimizers, such as Uglify which is now bundled, are managed via optimization.minimizer. Setting Uglify settings via plugins: {} will probably not work as needed/expected. The following should work.

...
optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        keep_fnames: true
      },
      extractComments: true,
      parallel: true
    })
  ]
 }
 ...

Babel Transpiler Issues

If you see a console error log similar to class constructors must be invoked with |new| then read on...

Built-in classes such as Date, Array, DOM etc cannot be properly subclassed due to limitations in ES5. This babel plugin will usually fix this problem.

Babel < 7

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: [['env', { exclude: ['transform-es2015-classes'] }]]
  }
}

Babel 7+

For Babel 7+ the syntax is slightly different. You'll need to use the new @babel... package name and provide some limitation on browser compatability. As per Babel Docs the following will net you support for browsers with >0.25% market share while also ignoring browsers that no longer receive security updates.

  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      presets: [
        ['@babel/preset-env', {
          exclude: [ 'transform-classes'],
          useBuiltIns: "entry" 
        }]
      ]
    }
  }