[SOLVED] ES7 decorators and class properties for Webpack 4

Help Requests
1

With JSPM, I use the following Babel options in config.js:

"es7.decorators",
"es7.classProperties",

What is the equivalent for webpack 4?

2

What?! You’re not using typescript? :slight_smile:

3

I may well migrate to that in future, but I’m starting with just ES6/7… the reason is I have a huge framework I need to migrate from Durandal to Aurelia and I think moving from ES5 to ES6/7 is easiest. Once all is working, I may or may not decide to move to TypeScript at a later date.

4

I have attempted to solve this using the babel-plugin-transform-decorators at version ^7.0.0-beta.3. My webpack.config.js has the following:

{
    test: /\.js?$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'],
            plugins: ['transform-decorators']
        }
    }
},

However, this now produces the following error:

ERROR in ./wwwroot/aurelia-app/shared/loading-indicator.js
    Module build failed: SyntaxError: D:\Source\GitHub\aurelia-razor-netcore2-skeleton\Aurelia.Skeleton.NetCore.Razor\wwwroot\aurelia-app\shared\loading-indicator.js: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead, or set the 'decoratorsBeforeExport' option to true. (5:0)

Ideas?

5

Can’t you generate a project with CLI and copy the config from there?

6

This might be a bug with the latest version of Babel, since that decoratorsBeforeExport option it’s complaining about was only added 4 days ago. More likely I am not configuring things right. In any case, I have opened an issue on the babel repo: https://github.com/babel/babel/issues/8088

7

UPDATE: The issues with Babel are now solved.