Class constructor cannot be invoked without 'new'

[driescroons]

🐛 bug report

For my WebXR game, I'm migrating to parcel v2. However, I've ran into an issue with the Text component from the Drei. It uses troika-three-text internally.

I've setup a repro repo to showcase the issue. You can find that here: https://github.com/driescroons/parcelv2troika3dtext

When I serve my project, I get the following error:

Uncaught TypeError: Class constructor InstancedBufferGeometry cannot be invoked without 'new'
    at new GlyphsGeometry

Here is the location this error is thrown:

However, the weird thing is that when I build the project and use live-server to host the example, I don't get any issue:

It seems like whenever I'm serving, parcel is using the umd distributable, but when building, using the esm?

umd file from troika-3d-text:

esm file from troika-3d-text:

I've tried adding the browserslist flag to my package.json, but to no avail.

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

package.json

{
  "name": "parcelv2troika3dtext",
  "scripts": {
    "start": "parcel serve ./src/index.html",
    "build": "parcel build ./src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.0.0-beta.2"
  },
  "dependencies": {
    "@react-three/drei": "^5.0.0",
    "@react-three/fiber": "^6.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "three": "^0.128.0"
  }
}

🤔 Expected Behavior

The serve command should work similar to the build command.

😯 Current Behavior

For some reason, the serve command, I think, uses the umd distributable file from troika-3d-text, while the build command uses the esm file.

💻 Code Sample

Reproduction repo

🌍 Your Environment

Software	Version(s)
Parcel	^2.0.0-beta.2
Node	v14.15.4
npm/Yarn	1.17.3
Operating System	Windows 10

[mischnic]

The underlying issue here is that the library you're using uses (untranspiled) classes, while in your app's code they are transpiled into functions. You can't extend untranspiled classes from transpiled classes.

Transpiling node_modules would also solve this: #1655

It seems like whenever I'm serving, parcel is using the umd distributable, but when building, using the esm?

Yes. Somewhat related: #4879

[driescroons]

would you recommend me to fix this in the package itself, or like you mentioned, transpile the node modules? I feel like this is more of an build / publish issue that should be fixed in the package.

[mischnic]

transpile the node modules

That's not possible with Parcel at the moment.

I feel like this is more of an build / publish issue that should be fixed in the package.

There's no single answer to that. The problem is that there is no standard at the moment to determine whether a npm package should be transpiled when building an application using it. And always publishing transpiled code even when you could use more modern syntax in your app isn't ideal either.