parcel: Unable to build TypeScript with classes (properties)

🐛 bug report

I’m unable to build code using TypeScript containing classes with properties.

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

test.ts

export class Foo {
  bar = 'qux'
}

tsconfig.json

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

npx parcel build test.ts

(no special parcel configuration, plain package.json with non-parcel specific fields)

🤔 Expected Behavior

The build should succeed without error.

😯 Current Behavior

The build crashes with the following error:

SyntaxError: project/test.ts: Missing class properties transform.
  1 | export class Foo {
> 2 |   bar = 'qux'
    |   ^^^^^^^^^^^
  3 | }
  4 |
    at File.buildCodeFrameError (project/node_modules/@babel/core/lib/transformation/file/file.js:267:12)
    at NodePath.buildCodeFrameError (project/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/index.js:144:21)
    at pushBody (project/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:156:20)
    at buildBody (project/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:130:5)
    at classTransformer (project/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:527:5)
    at transformClass (project/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:563:10)
    at PluginPass.ClassExpression (project/node_modules/@babel/plugin-transform-classes/lib/index.js:63:54)
    at newFn (project/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (project/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (project/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.77+287ac639
Node	v12.13.1
npm/Yarn	1.12.1
Operating System	macOS

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (7 by maintainers)

Most upvoted comments

FYI, since class properties are starting to be supported by engines, starting from Babel 7.10 they will be transpiled by @babel/preset-env when the shippedProposals option is enabled.

nicolo-ribaudo on Apr 29, 2020

Babel 7.10 was just released, meaning @babel/plugin-proposal-class-properties is included in @babel/preset-env.

mischnic on May 26, 2020

We can add it to preset-env’s shippedProposals option.

Tiny note, this also seems to happen if my browserslist config is on last 1 chrome versions which should support class properties and no “real” transpilation would be necessary

This is exactly why I don’t think that the TypeScript preset should transpile ECMAScript features or proposals!

nicolo-ribaudo on Feb 11, 2020

They’re part of JS, yes, but TS sometimes enables features by default before JS does, and advertises them in the TS docs and release notes as TS features. I’m kinda wondering if maybe preset-typescript should include all of the features that TSC includes. Otherwise we’ll continue to get questions about why features that people perceive to be part of TS aren’t working.

Classes is a good question though because sometimes you don’t want to compile them, e.g. for modern browsers. TSC uses tsconfig to decide this but Babel probably shouldn’t start reading that…

Maybe Babel should only include the features not already handled by preset-env? So if you add preset-env and preset-typescript together you’d always get all of the features supported by TSC. Over time these would move into preset-env and be removed from preset-typescript.

devongovett on Feb 8, 2020

You’ll need to add @babel/plugin-proposal-class-properties in a babelrc (together with preset-env and preset-typescript, but I find it quite strange that this isn’t part of the typescript preset. (This is also recommended in the “official” starter: https://github.com/microsoft/TypeScript-Babel-Starter)

Maybe we should add it by default together with the typescript preset (because this works without any configuration when using tsc), or ask babel about this. @devongovett

mischnic on Feb 5, 2020