4

I am using React for my project and I was migrating from webpack2 to webpack3. After updating babel and all dependencies I executed npm run build which resulted in error: Module build failed: SyntaxError: Missing class properties transform.

Examples of errors:

  11 |
  12 | class Login extends Component {
> 13 |     state = {
     |     ^
  14 |         email: "",
  15 |         password: ""
  16 |     }

Another example:

  11 | class Navigation extends React.Component {
  12 |
> 13 |     state = {
     |     ^
  14 |         loadingTotal: false,
  15 |     }

Does someone knows where is the problem? I try to google about error but I didn't find any solution so far...

.babelrc

{
  "presets": ["env", "stage-2", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties"
  ]
}

webpack.config

const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const path = require('path');
const config = {
    entry: {
        'vendor': './dist/vendor',
        'app': [
            'react-hot-loader/patch',
            './app/index'
        ]
    },
    output: {
        path: process.env.WEBPACK_ENV === 'production' ? path.join(__dirname, '/../../../../public_html/') : path.join(__dirname, '/public'),
        filename: '[name].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
            // { enforce: 'pre', test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' }
            {
                test: /\.(js|jsx)?$/,
                exclude: /node_modules/,
                options: {
                    presets: ['env']
                },
                loader: 'babel-loader'
            },
            {test: /\.json$/, loader: 'json-loader'},
            {test: /\.html/, loader: 'html-loader'},
            {test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.(gif|png|jpe?g)$/i, loader: 'file-loader?name=images/[name].[ext]'},
            {
                test: /\.woff2?$/,
                loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
            },
            {test: /\.(ttf|eot|svg)$/, loader: 'file-loader?name=fonts/[name].[ext]'}
        ]
    }
};

console.log(process.env.WEBPACK_ENV);

config.devtool = process.env.WEBPACK_ENV === 'production' ? 'source-map' : 'eval-source-map';
config.plugins = [
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'window.jQuery': "jquery",
        'window.$': 'jquery'

    }),
    new webpack.DefinePlugin({
        'WEBPACK_ENV': process.env.WEBPACK_ENV === 'production' ? '"production"' : '"dev"'
    }),
    new ExtractTextPlugin("styles.css"),
    process.env.WEBPACK_ENV === 'production' ? new UglifyJSPlugin() : WriteFilePlugin()
]


module.exports = config;

build command:

    "NODE_ENV=production BABEL_ENV=production WEBPACK_ENV=production ./node_modules/.bin/webpack --config webpack.config.js",
0

1 Answer 1

2

Did you forgot to install it?

npm install --save-dev babel-plugin-transform-class-properties

By the way you don't need to configure babel-loader options in webpack if you are using .babelrc.
So you can remove this:

options: {
   presets: ['env']
},
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the additional point regarding .babelrc. The babel configuration in webpack.config.js seems to take precedence over the .babelrc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.