Use parcel bundler: Class constructor cannot be invoked without 'new'

[camstuart]

This Demo app does not live reload, and I have found examples of browser sync setup.

But https://parceljs.org is lightning fast. Has anyone succeeded in using parcel?

My setup is:

package.json

"devDependencies": {
    "parcel-bundler": "^1.11.0"
  },
"scripts": {
    "start": "parcel index.html",
  }

Start up is fine, no errors or warnings.

Chrome dev tools errors:

Uncaught TypeError: Class constructor  cannot be invoked without 'new'
    at new MyApp (my-app.js:235)
    at Object.parcelRequire.src/components/my-app.js.@polymer/lit-element (my-app.js:275)
    at newRequire (my-app.115f99ed.js:49)
    at my-app.115f99ed.js:81
    at my-app.115f99ed.js:107

At that file & line we have nothing out of the ordinary:

window.customElements.define('my-app', MyApp);

[keanulee]

It's an issue with some less popular browsers (pretty sure IE but haven't verified). If you set "browserslist": ["> 5%"] in package.json It seems to work with parcel.

[keanulee]

Digging into this a little further, it looks like the same issue as https://github.com/webcomponents/custom-elements/issues/157. Our build tools (polymer build) and the webpack branch uses @babel/plugin-transform-classes@7.2.2 which works fine; not sure if parcel uses this.

[keanulee]

In addition to my previous comment, webcomponents-loader.js assumes that polyfill bundles are located in ./bundles/*.js relative to webcomponents-loader.js. Parcel breaks this assumption, so consider just loading the bundle directly. You'll also need custom-elements-es5-adapter.js as well.

In index.html, replace:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

with:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

[camstuart]

Unfortunately no luck. I installed the babel plugin, and created a .babelrc:

{
  "presets": [
    "es2017"
  ],
  "plugins": [
    "@babel/plugin-transform-classes"
  ]
}

And modified index.html as suggested, but the same error persists

[keanulee]

Ah, the real issue is that parcel doesn't babel transform code in node_modules which you can see in the below screenshot (still using class). I've read that section and don't know if I can get that working without having to modify packages on NPM. I'd suggest using the webpack branch for live reload.

[camstuart]

Ahh I see.

My project is in flight, are there any instructions on applying a web pack set up to an existing project?

Is it as easy as bringing in the webpack npm's scripts and config files?

[keanulee]

No written instuctions, but you can take a look at the diff (there's lots of commits, but if you scroll down to files changed, it's really only the npm scripts, the config file, and minimal source changes).

[adjenks]

I can also resolve this issue by using a browserslist of ["last 1 chrome versions"], which was recommended here: https://github.com/parcel-bundler/parcel/issues/839

I think that is a similar or the same problem.

[isanchezd]

I can also resolve this issue by using a browserslist of ["last 1 chrome versions"], which was recommended here: parcel-bundler/parcel#839

I think that is a similar or the same problem.

+1 for the fix if you work with the latest browsers

However, in mi case, i want to the bundle work in ie (11 at least) and this solution no working for me :(

[zelenkoff]

Is there some updates? Adding ["last 1 chrome versions"] fixed the problem, but it's not appreciate solution...

[Makio64]

Got the same problem when i try to bundle with Webpack /babel latest...

Also need to support edge / ie and currently with this solution it doesnt work

[stale[bot]]

This project is no longer under development and will be transitioning to a read-only repo. Thank you for your contributions.