"SyntaxError: Unexpected token {" when 'yarn run build:production' in staging

Question

I apologize in advance for my approximate english :)

Here is a little recap: We have a Rails 4 project, and we added recently some of React components with the React_on_rails gem, so we need to implement Webpack as a friend to the Asset Pipeline (Yeah I know, Rails 5 do it really better)

So the problem is, when I try to deploy on staging, and when trying to do a yarn run build:production on it :

$ NODE_ENV=production webpack -p --config webpack.config.js
/home/unisc/apps/staging/releases/20170831104131/client/node_modules/react-on-rails/webpackConfigLoader.js:14
const { join, resolve } = require('path');
      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/unisc/apps/****_staging/releases/20170831104131/client/webpack.config.js:13:27)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

Here is my package.json :

{
  "name": "****",
  "private": true,
  "scripts": {
    "build:test": "NODE_ENV=test webpack --config webpack.config.js",
    "build:production": "NODE_ENV=production webpack --config webpack.config.js",
    "build:development": "NODE_ENV=development webpack -w --config webpack.config.js"
  },
  "cacheDirectories": ["node_modules", "client/node_modules"],
  "dependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.3.2",
    "babel-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "es5-shim": "^4.5.9",
    "expose-loader": "^0.7.3",
    "imports-loader": "^0.7.1",
    "js-yaml": "^3.8.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-on-rails": "8.0.0",
    "webpack": "^2.3.3",
    "webpack-manifest-plugin": "^1.1.0"
  },
  "devDependencies": {
  }
}

and my webpack.config.js :

// For inspiration on your webpack configuration, see:
// https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client
// https://github.com/shakacode/react-webpack-rails-tutorial/tree/master/client

const webpack = require('webpack');
const { resolve } = require('path');

const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');

const configPath = resolve('..', 'config');
const { devBuild, manifest, webpackOutputPath, webpackPublicOutputDir } =
  webpackConfigLoader(configPath);

const config = {

  context: resolve(__dirname),

  entry: {
    'webpack-bundle': [
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'babel-polyfill',
      './app/bundles/registration',
    ],
  },

  output: {
    // Name comes from the entry section.
    filename: '[name]-[hash].js',

    // Leading slash is necessary
    publicPath: `/${webpackPublicOutputDir}`,
    path: webpackOutputPath,
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },

  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
      DEBUG: false,
    }),
    new ManifestPlugin({ fileName: manifest, writeToFileEmit: true }),
  ],

  module: {
    rules: [
      {
        test: require.resolve('react'),
        use: {
          loader: 'imports-loader',
          options: {
            shim: 'es5-shim/es5-shim',
            sham: 'es5-shim/es5-sham',
          },
        },
      },
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

I tried to find the same problem with no success...

This command works on my machine, both (my machine and the staging) have the same version of webpack and anyway they use the one in node_modules.

Thanks for reading, and have a nice day ;)

What I've tried :

• npm upgrade, yarn upgrade, removing node_modules and trying again
• Convert the entire config file into es5, but it bump on another curly brace in a dependency
• Tried to move, remove the .babelrc file

What i'm actually trying :

• Look like es6 transpilation is having a bad time

Answer 1

Fixed it !

Thanks to Michael Jungo, the problem was that nodejs was not updated on the staging server, so curly braces were unable to be read...

Thank you !! I lost a lot of time anyway...