Uncaught TypeError: Class constructor [extended class] cannot be invoked without 'new'

Choose one: is this a 🐛 bug report or 🙋 feature request?

🎛 Configuration (.babelrc, package.json, cli command)

// .babelrc
{
  "presets" : ["es2015-ie"]
}

//.postcssrc
{
	"modules": true,
	"plugins": {
		"autoprefixer": {
			"grid": true
		}
	}
}
//package.json
{
 "name": "",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "./node_modules/.bin/parcel --no-cache ./src/index.html --out-dir ./dist",
  "build": "./node_modules/.bin/parcel build --no-minify ./src/index.html --out-dir ./dist"
 },
 "author": "",
 "license": "",
 "dependencies": {
  "acorn": "^5.4.1",
  "babel-preset-es2015-ie": "^6.7.0",
  "mobile-detect": "^1.4.1",
  "node-sass": "^4.7.2",
  "parcel-bundler": "^1.6.1",
  "postcss-modules": "^1.1.0",
  "webpack": "^3.1.0",
  "wrench-set": "^1.0.6"
 }
}

🤔 Expected Behavior

It should just create the class and do the magic of Element. (wrench-set was created by me, and tested in another project, which works perfectly, using parcel 1.5.1)

😯 Current Behavior

it shoots error with class constructor cannot be invoked without new for the super()

Uncaught TypeError: Class constructor Element cannot be invoked without ‘new’ at new Viewport (viewport.js:5) at Object.require.4…/index.scss (index.js:4) at newRequire (3127ebea6fd59e02267b4119b100f294.js:42) at require.14 (3127ebea6fd59e02267b4119b100f294.js:69)

💁 Possible Solution

the hacky way 😄 revert to 1.5.1 in order to be able to successfully compile the code

🔦 Context

💻 Code Sample

// main.js
import style from './index.scss'
import Viewport from './viewport.js'

const VIEWPORT = new Viewport({
	renderTo: document.body
})

// viewport.js
import {Element} from 'wrench-set'
import style from './viewport.scss'

export default class Viewport extends Element {
	constructor (config) {
		super({
			renderTo: config.renderTo,
			innerHTML: 'hi',
			className: `${style.viewport}`
		})
	}
}

🌍 Your Environment

Software	Version(s)
Parcel	1.6.1
Node	8.9.3
npm/Yarn	5.5.1
Operating System	Linux Mint 18

[alber70g]

Any news on a fix? I’m using LitElement and creating mixins for classes but I’m not able to compile with Parcel. I’m also using Typescript.

I got a fix to get it work with Parcel. This makes it to not remove the class syntax. But it’ll hurt older browsers:

Add this to your package.json and Parcel will pick it up as babel config.

"browserslist": [
    "last 1 chrome versions"
  ]

[mthadley]

I had a similar issue. I was extending a class exported from a node module. Upon inspecting the compiled code, I noticed that my class was transpiled into an ES5 class, but the code coming from the node modules was not being transpiled (it was still defined with the class keyword, etc).

So it was essentially an ES5 class extending an ES6 class, and that seems to cause this error. I haven’t managed to fix it yet, but it seems like one reason might be that Parcel isn’t compiling the module.

Here’s the module in question.. Maybe it has something in common with wrench-set?