webpack: Webpack 4.40.2 can't parse class properties

Bug report

What is the current behavior?

Webpack fails with error:

ERROR in /var/app/src/util/bunyan/logstash.js 42:8
Module parse failed: Unexpected token (42:8)
You may need an appropriate loader to handle this file type.
| 
| let LogstashStream = exports.LogstashStream = class LogstashStream extends _events.EventEmitter {
>   _name = 'bunyan';
|   _level = 'info';
|   _server = _os2.default.hostname();
 @ /var/app/src/util/logger.js 24:16-44
 @ ./index.js
 @ multi babel-polyfill index.js

If the current behavior is a bug, please provide the steps to reproduce.

Try compiling any file that uses class properties, for example:

class X {
  y = 1
}

or use the Parser directly:

> new (require('./node_modules/webpack/lib/Parser'))().parse('class X { y = 1 }', {})
Thrown:
[SyntaxError: Unexpected token (1:12)
] {
  pos: 12,
  loc: Position { line: 1, column: 12 },
  raisedAt: 13
}

What is the expected behavior?

This should not throw an error

Other relevant information: webpack version: 4.40.2 Node.js version: 12.10.0 Operating System: Debian Buster (Debian 10) Additional tools:

About this issue

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

Most upvoted comments

i ran into this issue when upgrading a node app that i was successfully bundling to the latest version of hapi, which now uses private class fields in a few places like this. i know node isn’t as popular of a target, but i try to avoid applying the babel-loader to my node_modules/ and would love to be able to continue that approach, at least when a package works without transpilation when not bundling.

since this is a closed issue, i’m happy to open a new one to track this with the specific goal of handling when the target is node. would that be worthwhile @sokra , or is the reality that we need to wait for the proposal to reach stage 4, regardless of existing support in node?

+12

travi on Feb 13, 2020

@sokra But what about target ‘node’? Class Fields and Private Class Fields are already on LTS version of node and nodejs developers should wait until every browser include support of that feature?

+12

JerryCauser on Dec 6, 2019

@sokra class properties are now in stage 4 https://twitter.com/robpalmer2/status/1384208760420274176

Could we re-open this issue? For me personally, class properties are the only reason to use babel. Would love to get acorn updated soon. Acorn issue for tracking: https://github.com/acornjs/acorn/issues/1025

ilkkao on Apr 20, 2021

@voraciousdev the underlying JS parser was updated in https://github.com/webpack/webpack/releases/tag/v5.36.0

ilkkao on May 29, 2021

webpack only supports stage 4 proposals, similar to acorn, except for a few exceptions regarding ESM.

Once acorn supports class properties we will support them too.

sokra on Sep 24, 2019

We have babel-loader. We’re trying to not transform class-properties, since Node.js 12.x supports them natively. We’re using Webpack for a server side app where overall compatibility doesn’t matter.

bgdavidx on Sep 19, 2019