parcel: 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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 26
Comments: 25 (6 by maintainers)

Commits related to this issue

work around https://github.com/parcel-bundler/parcel/issues/839 — committed to horizon-games/eth-state-channels-research by attente 6 years ago

Most upvoted comments

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

+22

alber70g on Sep 17, 2018

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?

+16

mthadley on Nov 26, 2018

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 👍

marlonicus on Jul 8, 2020

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.

stale[bot] on Jan 17, 2020

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');

leoseccia on Jun 17, 2019

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

prasannavl on Nov 26, 2018

@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.

DeMoorJasper on Jan 17, 2020

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

jamesgpearce on Sep 16, 2018

I have encountered the same problem using webpack+typescript.

I use @ContextMenuTarget

FishOrBear on Apr 8, 2018

@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 on Mar 3, 2018