Webpack not building ES6 class missing config issue

Question

I am having an issue adding webpack to an existing React project. Previously, the project was rendered server-side with next.js. However, there seems to be something wrong with my webpack config. Whenever I try to build my project, it fails with seemingly valid ES6 code:

ERROR in ./src/components/shared/menu/component.js Module build failed: SyntaxError: Unexpected token (8:12)

   6 |
   7 | export default class Menu extends PureComponent {
>  8 |   propTypes = {
     |             ^
   9 |     items: PropTypes.arrayOf(PropTypes.shape({
  10 |       name: PropTypes.string.isRequired,
  11 |       action: PropTypes.func.isRequired,

My webpack.config.js

    const path = require('path');

module.exports = {
    entry: './src/pages/index/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.js?$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                  }           
            },
            {
                test: /\.scss$/,
                use: [ 
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS
                 ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist")
    }
};

My .babelrc

{ "presets": ["es2015", "react"] }

I've already tried search on SO and google, but cannot find anyone else experiencing the same issue. Please advise! Thanks!

If there is nothing like babel, typescript, etc, you can't do properties like that in pure ES6. — ASDFGerte, May 28 '18 at 19:50
Possible duplicate of [How to use arrow functions (public class fields) as class methods?](https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods) — azium, May 28 '18 at 19:50
FYI, field declarations are not valid ES6, it's a stage 3 proposal currently, https://github.com/tc39/proposal-class-fields — Alexey Lebedev, May 28 '18 at 21:06

topheman · Answer 1 · 2018-05-28T20:52:47.193

1

1) run: npm install --save-dev babel-plugin-transform-class-properties

2) Update your .babelrc file:

{ "presets": ["es2015", "react"], "plugins": ["transform-class-properties"] }

That way, babel will also transform class properties as specified in the README: https://www.npmjs.com/package/babel-plugin-transform-class-properties

Also, make sure to use the keyword static when you define propTypes inside a class (so that it will be declared on the class itself, not on its prototype)

edited May 28 '18 at 20:52

answered May 28 '18 at 20:06

topheman

7,422
4
24
33

1

Thanks, that took care of the error. Getting some problems with the spread operator now. Adding "transform-es2015-destructuring" and "transform-object-rest-spread" to my babel plugins should address the problem, right? – ZPG May 28 '18 at 20:43
1

Based on your comment, you will most likelly need the following plugins: `["transform-class-properties", "transform-es2015-destructuring", "transform-object-rest-spread", "add-module-exports"]` – topheman May 28 '18 at 20:46

score -1 · Answer 2 · answered May 28 '18 at 20:57

-1

Use babel polyfill plugin, and have it included in webpack before your entry points, that means have entry point as array and first elemen is 'babel-polyfill' and second element is your index.js

You could also have require or import babel-polyfill as the first line index.js but only needed to have it once either in webpack or index file.

answered May 28 '18 at 20:57

hashbytes

769
1
8
26

`babel-polyfill` has other purposes like making sure `Array#includes()` will be available (provide a polyfill if necessary) - `create-react-app@1.x.x` uses `babel-plugin-transform-class-properties` in its config https://github.com/facebook/create-react-app/blob/v1.1.4/packages/babel-preset-react-app/package.json#L16 – topheman May 28 '18 at 21:06

Webpack not building ES6 class missing config issue

2 Answers2