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

rokyed · 2018-02-17T15:54:57Z

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

mthadley · 2018-03-02T01:43:41Z

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?

rokyed · 2018-03-03T06:24:32Z

@mthadley about wrench-set, yes, it's not minified. It's a module that I've built, it's super simple, it's based on ES6, but I don't think that should be the problem, when you are packaging something, you shouldn't expect that modules are already packaged, that's my understanding of a package. I think that it should be compiled/baked into your code, from the code that was provided.

rokyed · 2018-03-15T11:27:27Z

After further investigation, it seems that babel won't compile node_modules, in webpack there are ways to mitigate this trough webpack.

FishOrBear · 2018-04-08T07:37:11Z

I have encountered the same problem using webpack+typescript.

I use @ContextMenuTarget

danmarshall · 2018-06-09T00:18:20Z

@mthadley describes this bug succinctly:

an ES5 class extending an ES6 class, and that seems to cause this error.

Parcel has compiled some of my classes to functions. 🤔
@FishOrBear do you have a workaround?

I'm getting this error in version 1.8.1

danmarshall · 2018-06-09T00:34:13Z

I have a simple repro:

test.html:

<html>
<head>
    <script>
        //some other library
        class Animal {
            move(distance) {
                console.log(`Animal moved ${distance}`);
            }
        }
    </script>
</head>
<body>
    <script src="test.js"></script>
</body>
</html>

test.js:

class Horse extends Animal {
    move(distance) {
        console.log(`Horse galloped ${distance}`);
    }
}

new Animal().move(7);
new Horse().move(7);

Output before Parcel:

Animal moved 7
Horse galloped 7

Output after Parcel:

Animal moved 7
test.84371532.js:2 Uncaught TypeError: Class constructor Animal cannot be invoked without 'new'
    at new i (test.84371532.js:2)
    at Object.parcelRequire.4 (test.84371532.js:2)
    at i (test.84371532.js:1)
    at parcelRequire.4 (test.84371532.js:1)
    at test.84371532.js:1
i @ test.84371532.js:2
parcelRequire.4 @ test.84371532.js:2
i @ test.84371532.js:1
parcelRequire.4 @ test.84371532.js:1
(anonymous) @ test.84371532.js:1

danmarshall · 2018-06-09T00:42:48Z

Here is the compiled Horse which is now a function instead of a class:

var Horse = function (_Animal) {
    _inherits(Horse, _Animal);

    function Horse() {
        _classCallCheck(this, Horse);

        return _possibleConstructorReturn(this, (Horse.__proto__ || Object.getPrototypeOf(Horse)).apply(this, arguments));
    }

    _createClass(Horse, [{
        key: "move",
        value: function move(distance) {
            console.log("Horse galloped " + distance);
        }
    }]);

    return Horse;
}(Animal);

alber70g · 2018-07-23T16:49:21Z

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.

[edit] Example here https://codesandbox.io/s/0pl314l77l

arnm · 2018-08-22T18:39:45Z

bump...

Nviano · 2018-09-15T10:29:39Z

bump

jamesgpearce · 2018-09-16T20:43:57Z

If you manage the dependent module's package.json, you might be able to avoid this by using "source": true

alber70g · 2018-09-17T08:59:58Z

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"
  ]

DeMoorJasper · 2018-09-17T16:49:14Z

Adding babel-polyfill would probably fix this.

It's probably due to parcel compiling using babel to correspond to specified browserlist as @alber70g pointed out already

prasannavl · 2018-11-12T11:49:06Z

I think this real issue is due to the fact that parcel uses pkg.module in package.json incorrectly. A lot of the modern libraries today providing both cjs and es6, set main to cjs versions, while module will be set to es6 versions.

The correct behavior should be, when an es6 module is encountered, and the compile target is es5 and not es6, parcel should compile these into es5, despite them being node_modules.

But that rises new questions: who should do this? Can parcel set these babel configs automatically, if so how does parcel know if your compile target is es6, or es5? Should that be identified from babel config (can they even be reliably)? This also walks you down the rabbit hole of should modules be compiled with the same config as your project? Now, that could have unforeseen side-effects. (Relevant: #13)

If you're not bound by legacy browsers, I'd just set babel to ignore es6 class transformations and call it a day.

The other issue is extending ES6 native classes like HTMLElement, HTMLDivElement, etc with ES5. The only right way to do this is to use Object/Reflect.setPrototypeOf, etc, or simply use the above solution where you just stick to ES6 classes.

Long story short - ES6.

jantimon · 2018-11-12T12:45:34Z

@prasannavl the best practice is to transpile es6 as there are so many different es6 stages:

So even module should be es5:
https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features

prasannavl · 2018-11-12T12:54:16Z

@jantimon - Err, almost all modern platforms support a most of the commonly used features today, but not import and export. So, most modern libraries, take the polymer's lit-html, for instance, just completely bids good-bye to es5.

And since we're specifically talking about es6 classes here, it's supported everywhere today unless you're concerned with legacy. The point being, there are and probably will be libraries that forgo es5, and just apply module to use es6. The only way to do it correctly moving forward would be to handle this case.

PS: The rollup link simply tells you that you need other features to be transpiled -- one might choose to just transpile their code to the lowest es6 stages with classes. That's still completely valid as far module field is concerned.

timdeng2324 · 2018-11-26T20:15:38Z

@prasannavl what should the babelrc target be for ES6? @alber70g's latest 1 chrome version worked for me, but i want to make sure i have maximum browser compatibility. right now i'm just using @babel/preset-env.

prasannavl · 2018-11-26T23:09:02Z

@timdeng2324 - perhaps, try adding @babel/plugin-transform-classes to exclude, and see if that does the trick? (haven't really tested it myself)

Mouvedia · 2019-05-01T00:12:40Z

Is there a fix that doesn't involve using browserslist?

leoseccia · 2019-06-17T19:29:43Z

I had this problem too and after spending a day messing around with babel, I fixed it by changing the way I imported these (and don't use babel at all):

import Inline from 'quill/blots/Inline';
import ReactQuill from 'react-quill';

to:

import ReactQuill, {Quill} from 'react-quill';
let Inline = Quill.import('blots/inline');

stale · 2020-01-17T12:56:14Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

DeMoorJasper · 2020-01-17T13:18:10Z

This will get fixed in Parcel 2

Mouvedia · 2020-01-17T13:22:05Z

@DeMoorJasper last alpha release was in November of last year.

Do you have an idea of when Parcel will be stable?
Is it already fixed in the alpha?

DeMoorJasper · 2020-01-17T13:25:24Z

@Mouvedia we currently do not have a timeline on when a stable Parcel 2 version will be out, we are however working on a list of features/bugfixes that are required to get it to stable so we can focus on getting it out asap without focusing too much on improvements and features we can add-on afterwards.

I think it should be fixed in the current alpha, not entirely sure.

marlonicus · 2020-05-21T00:05:59Z

To anyone arriving here having this problem with TypeScript and Parcel, you might need to add the following to a tsconfig.json in your project root to fix the issue:

{
  "compilerOptions": {
    "target": "esnext"
  }
}

And be sure to run parcel again with --no-cache for it to kick in 👍

DeMoorJasper added the 🐛 Bug label Feb 27, 2018

attente added a commit to horizon-games/eth-state-channels-research that referenced this issue Apr 4, 2018

work around parcel-bundler/parcel#839

9f6cd5a

dios-david mentioned this issue Oct 4, 2018

Uncaught TypeError: Class constructor HyperHTMLElement cannot be invoked without 'new' WebReflection/hyperHTML-Element#38

Closed

Banou26 mentioned this issue Dec 18, 2018

ES5 transpilation on typescript #2436

Closed

adjenks mentioned this issue Feb 1, 2019

Use parcel bundler: Class constructor cannot be invoked without 'new' Polymer/pwa-starter-kit#309

Closed

brunoimbrizi mentioned this issue Mar 18, 2019

Class constructor Effect cannot be invoked without 'new' pmndrs/postprocessing#115

Closed

GeordieP mentioned this issue Apr 26, 2019

Class constructor SvelteComponent cannot be invoked without 'new' DeMoorJasper/parcel-plugin-svelte#44

Open

stale bot added the Stale Inactive issues label Jan 17, 2020

parcel-bundler deleted a comment from Mouvedia Jan 17, 2020

DeMoorJasper closed this as completed Jan 17, 2020

github-actions bot removed the Stale Inactive issues label May 21, 2020

ShaMan123 mentioned this issue Nov 16, 2023

test(): add SSR test fabricjs/fabric.js#9490

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

rokyed commented Feb 17, 2018 •

edited

Loading

mthadley commented Mar 2, 2018 •

edited

Loading

rokyed commented Mar 3, 2018

rokyed commented Mar 15, 2018

FishOrBear commented Apr 8, 2018

danmarshall commented Jun 9, 2018 •

edited

Loading

danmarshall commented Jun 9, 2018 •

edited

Loading

danmarshall commented Jun 9, 2018 •

edited

Loading

alber70g commented Jul 23, 2018 •

edited

Loading

arnm commented Aug 22, 2018

Nviano commented Sep 15, 2018

jamesgpearce commented Sep 16, 2018

alber70g commented Sep 17, 2018 •

edited

Loading

DeMoorJasper commented Sep 17, 2018 •

edited

Loading

prasannavl commented Nov 12, 2018 •

edited

Loading

jantimon commented Nov 12, 2018 •

edited

Loading

prasannavl commented Nov 12, 2018 •

edited

Loading

timdeng2324 commented Nov 26, 2018

prasannavl commented Nov 26, 2018

Mouvedia commented May 1, 2019

leoseccia commented Jun 17, 2019

stale bot commented Jan 17, 2020

DeMoorJasper commented Jan 17, 2020

Mouvedia commented Jan 17, 2020

DeMoorJasper commented Jan 17, 2020

marlonicus commented May 21, 2020 •

edited

Loading

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

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

Comments

rokyed commented Feb 17, 2018 • edited Loading

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

mthadley commented Mar 2, 2018 • edited Loading

rokyed commented Mar 3, 2018

rokyed commented Mar 15, 2018

FishOrBear commented Apr 8, 2018

danmarshall commented Jun 9, 2018 • edited Loading

danmarshall commented Jun 9, 2018 • edited Loading

test.html:

test.js:

Output before Parcel:

Output after Parcel:

danmarshall commented Jun 9, 2018 • edited Loading

alber70g commented Jul 23, 2018 • edited Loading

arnm commented Aug 22, 2018

Nviano commented Sep 15, 2018

jamesgpearce commented Sep 16, 2018

alber70g commented Sep 17, 2018 • edited Loading

DeMoorJasper commented Sep 17, 2018 • edited Loading

prasannavl commented Nov 12, 2018 • edited Loading

jantimon commented Nov 12, 2018 • edited Loading

prasannavl commented Nov 12, 2018 • edited Loading

timdeng2324 commented Nov 26, 2018

prasannavl commented Nov 26, 2018

Mouvedia commented May 1, 2019

leoseccia commented Jun 17, 2019

stale bot commented Jan 17, 2020

DeMoorJasper commented Jan 17, 2020

Mouvedia commented Jan 17, 2020

DeMoorJasper commented Jan 17, 2020

marlonicus commented May 21, 2020 • edited Loading

rokyed commented Feb 17, 2018 •

edited

Loading

mthadley commented Mar 2, 2018 •

edited

Loading

danmarshall commented Jun 9, 2018 •

edited

Loading

danmarshall commented Jun 9, 2018 •

edited

Loading

danmarshall commented Jun 9, 2018 •

edited

Loading

alber70g commented Jul 23, 2018 •

edited

Loading

alber70g commented Sep 17, 2018 •

edited

Loading

DeMoorJasper commented Sep 17, 2018 •

edited

Loading

prasannavl commented Nov 12, 2018 •

edited

Loading

jantimon commented Nov 12, 2018 •

edited

Loading

prasannavl commented Nov 12, 2018 •

edited

Loading

marlonicus commented May 21, 2020 •

edited

Loading