Uncaught TypeError: when extending base class.

[magicspon]

Hello,
Using the latest version:

import { BaseClass } from 'domtastic'

class DropDown extends BaseClass {
	doSomething() {
		return this.addClass('.foo')
	}
}

error:

app.js?716f:15 Uncaught TypeError: Super expression must either be null or a function, not undefined

stack:

app.js?716f:15 Uncaught TypeError: Super expression must either be null or a function, not undefined
    at _inherits (app.js?716f:15)
    at eval (app.js?716f:16)
    at eval (20:50)
    at Object.<anonymous> (app.bundle.js:971)
    at __webpack_require__ (app.bundle.js:679)
    at fn (app.bundle.js:89)
    at Object.<anonymous> (app.bundle.js:809)
    at __webpack_require__ (app.bundle.js:679)
    at app.bundle.js:725
    at app.bundle.js:728
_inherits @ app.js?716f:15
(anonymous) @ app.js?716f:16
(anonymous) @ 20:50
(anonymous) @ app.bundle.js:971
__webpack_require__ @ app.bundle.js:679
fn @ app.bundle.js:89
(anonymous) @ app.bundle.js:809
__webpack_require__ @ app.bundle.js:679
(anonymous) @ app.bundle.js:725
(anonymous) @ app.bundle.js:728

any thoughts?

[webpro]

Can't reproduce your issue. This works as intended:

class DropDown extends $.BaseClass {
    doSomething() {
        return this.addClass('foo');
    }
}
let component = new DropDown('body');
component.doSomething();

Are you transpiling the class syntax?

[magicspon]

Yup, using babel and webpack

babel-loader webpack snippet

{
	test: /\.js?$/,
	loader: 'babel-loader',
	exclude: /node_modules/,
	query: {
		presets: [
			[
				'env',
				{
					targets: {
						browsers: ['last 2 versions', 'safari >= 7']
					}
				}
			]
		],
		plugins: [
			'transform-object-rest-spread',
			'transform-class-properties',
			'syntax-dynamic-import'
		],
		babelrc: false,
		cacheDirectory: false
	}
},

src here https://github.com/magicspon/spon-ui

[magicspon]

BaseClass appears to be undefined...

If I use $.BaseClass I get a different error:
Class constructor BaseClass cannot be invoked without 'new'

very strange!

import $, { BaseClass } from 'domtastic'

console.log(BaseClass) // undefined 

class DropDown extends $.BaseClass {
	doSomething() {
		return this.addClass('foo')
	}
}
let component = new DropDown('body') // Class constructor BaseClass cannot be invoked without 'new'

[webpro]

The BaseClass is a property of $, according to the specs I don't think it's even "valid" to import it like this (as it isn't exported as such). I think that's why you're getting an undefined with this:

import { BaseClass } from 'domtastic'

Then, the error might come from the fact that DOMtastic is already transpiled. Maybe another transpilation step you are using breaks something. Perhaps you can try to either use the untranspiled version of DOMtastic (in the ./src folder of the distribution), or exclude it from transpilation.

By the way, I'm not sure what Webpack grabs as the root source when bundling (and thus transformations), but this is in package.json:

  "main": "dist/domtastic.js",
  "jsnext:main": "src/index.js",
  "module": "src/index.js",

[webpro]

Closing this due to inactivity.