Need help building an old website from 2016

[beeb]

Hey there.

I am not proud to have to open an issue here but I've been scratching my head for days and am still stuck.

I used the starter kit as base for a website I made in 2016, and now need to build it again to update some minor things. Unfortunately, although I think I identified which version of node I was using back then (node 6.x), and pegged all dependencies versions (removed the ^ before all version numbers otherwise it would have conflicts), I am still unable to build it completely.

package.json

{
  "name": "react-starter-kit",
  "private": true,
  "version": "0.0.0",
  "description": "React / Flux  Starter Kit",
  "repository": "https://github.com/kriasoft/react-starter-kit",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "3.3.1",
    "director": "1.2.7",
    "flux": "2.0.1",
    "intl": "0.1.4",
    "react": "0.12.2",
    "react-intl": "1.0.2"
  },
  "devDependencies": {
    "browser-sync": "1.9.0",
    "css-loader": "0.9.1",
    "del": "1.1.1",
    "gulp": "3.8.10",
    "gulp-autoprefixer": "2.0.0",
    "gulp-cache": "0.2.4",
    "gulp-changed": "1.1.0",
    "gulp-csscomb": "3.0.3",
    "gulp-gh-pages": "0.4.0",
    "gulp-htmlmin": "1.0.0",
    "gulp-if": "1.2.5",
    "gulp-imagemin": "2.1.0",
    "gulp-jsbeautifier": "0.0.4",
    "gulp-jshint": "1.9.0",
    "gulp-less": "2.0.1",
    "gulp-load-plugins": "0.8.0",
    "gulp-minify-css": "0.3.11",
    "gulp-plumber": "0.6.6",
    "gulp-rename": "1.2.0",
    "gulp-render": "0.2.2",
    "gulp-replace": "0.5.0",
    "gulp-size": "1.2.0",
    "gulp-uglify": "1.0.2",
    "gulp-util": "3.0.2",
    "jest-cli": "0.2.1",
    "jshint": "2.5.11",
    "jshint-loader": "0.8.0",
    "jshint-stylish": "1.0.0",
    "jsx-loader": "0.12.2",
    "less": "2.2.0",
    "less-loader": "2.0.0",
    "merge-stream": "0.1.7",
    "minimist": "1.1.0",
    "protractor": "1.6.0",
    "psi": "1.0.1",
    "react-tools": "0.12.2",
    "run-sequence": "1.0.2",
    "style-loader": "0.8.2",
    "url-loader": "0.5.5",
    "webpack": "1.4.15",
    "webpack-dev-server": "1.7.0"
  },
  "jest": {
    "rootDir": "src",
    "scriptPreprocessor": "../config/preprocessor.js",
    "unmockedModulePathPatterns": [
      "react"
    ]
  },
  "scripts": {
    "start": "gulp",
    "test": "jshint && jest",
    "jshint": "jshint ./src gulpfile.js",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update"
  }
}

gulpfile.js

/*
 * React.js Starter Kit
 * Copyright (c) 2014 Konstantin Tarkus (@koistya), KriaSoft LLC.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

'use strict';

// Include Gulp and other build automation tools and utilities
// See: https://github.com/gulpjs/gulp/blob/master/docs/API.md
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var path = require('path');
var merge = require('merge-stream');
var runSequence = require('run-sequence');
var webpack = require('webpack');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var fs = require('fs');
var url = require('url');
var ReactTools = require('react-tools');
var argv = require('minimist')(process.argv.slice(2));

// Settings
var DEST = './build';                         // The build output folder
var RELEASE = !!argv.release;                 // Minimize and optimize during a build?
var GOOGLE_ANALYTICS_ID = 'UA-58685598-1';       // https://www.google.com/analytics/web/
var AUTOPREFIXER_BROWSERS = [                 // https://github.com/ai/autoprefixer
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];

var src = {};
var watch = false;
var pkgs = (function() {
  var pkgs = {};
  var map = function(source) {
    for (var key in source) {
      pkgs[key.replace(/[^a-z0-9]/gi, '')] = source[key].substring(1);
    }
  };
  map(require('./package.json').dependencies);
  return pkgs;
}());

// Configure JSX Harmony transform in order to be able
// require .js files with JSX (see 'pages' task)
var originalJsTransform = require.extensions['.js'];
var reactTransform = function(module, filename) {
  if (filename.indexOf('node_modules') === -1) {
    var src = fs.readFileSync(filename, {encoding: 'utf8'});
    src = ReactTools.transform(src, {harmony: true, stripTypes: true});
    module._compile(src, filename);
  } else {
    originalJsTransform(module, filename);
  }
};
require.extensions['.js'] = reactTransform;

// The default task
gulp.task('default', ['serve']);

// Clean up
gulp.task('clean', del.bind(null, [DEST]));

// 3rd party libraries
gulp.task('vendor', function() {
  return merge(
    gulp.src('./node_modules/jquery/dist/**')
      .pipe(gulp.dest(DEST + '/vendor/jquery-' + pkgs.jquery)),
    gulp.src('./node_modules/bootstrap/dist/fonts/**')
      .pipe(gulp.dest(DEST + '/fonts'))
  );
});

// Static files
gulp.task('assets', function() {
  src.assets = 'src/assets/**';
  return gulp.src(src.assets)
    .pipe($.changed(DEST))
    .pipe(gulp.dest(DEST))
    .pipe($.size({title: 'assets'}));
});

// Images
gulp.task('images', function() {
  src.images = 'src/images/**';
  return gulp.src(src.images)
    .pipe($.changed(DEST + '/images'))
    .pipe($.imagemin({
      progressive: true,
      interlaced: true
    }))
    .pipe(gulp.dest(DEST + '/images'))
    .pipe($.size({title: 'images'}));
});

// HTML pages
gulp.task('pages', function() {
  src.pages = ['src/components/pages/**/*.js', 'src/components/pages/404.html'];

  var currentPage = {};
  var Dispatcher = require('./src/core/Dispatcher');
  var ActionTypes = require('./src/constants/ActionTypes');

  // Capture document.title and other page metadata changes
  Dispatcher.register(function(payload) {
    if (payload.action.actionType == ActionTypes.SET_CURRENT_PAGE)
    {
      currentPage = payload.action.page;
    }
    return true;
  });

  var render = $.render({
      template: './src/components/pages/index.html',
      data: function() { return currentPage; }
    })
    .on('error', function(err) { console.log(err); render.end(); });

  return gulp.src(src.pages)
    .pipe($.changed(DEST, {extension: '.html'}))
    .pipe($.if('*.js', render))
    .pipe($.replace('UA-XXXXX-X', GOOGLE_ANALYTICS_ID))
    .pipe($.if(RELEASE, $.htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      minifyJS: true
    }), $.jsbeautifier()))
    .pipe(gulp.dest(DEST))
    .pipe($.size({title: 'pages'}));
});

// CSS style sheets
gulp.task('styles', function() {
  src.styles = 'src/styles/**/*.{css,less}';
  return gulp.src('src/styles/bootstrap.less')
    .pipe($.plumber())
    .pipe($.less({
      sourceMap: !RELEASE,
      sourceMapBasepath: __dirname
    }))
    .on('error', console.error.bind(console))
    .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
    .pipe($.csscomb())
    .pipe($.if(RELEASE, $.minifyCss()))
    .pipe(gulp.dest(DEST + '/css'))
    .pipe($.size({title: 'styles'}));
});

// Bundle
gulp.task('bundle', function(cb) {
  var started = false;
  var config = require('./config/webpack.js')(RELEASE);
  var bundler = webpack(config);

  function bundle(err, stats) {
    if (err) {
      throw new $.util.PluginError('webpack', err);
    }

    if (argv.verbose) {
      $.util.log('[webpack]', stats.toString({colors: true}));
    }

    if (!started) {
      started = true;
      return cb();
    }
  }

  if (watch) {
    bundler.watch(200, bundle);
  } else {
    bundler.run(bundle);
  }
});

// Build the app from source code
gulp.task('build', ['clean'], function(cb) {
  runSequence(['vendor', 'assets', 'images', 'pages', 'styles', 'bundle'], cb);
});

// Launch a lightweight HTTP Server
gulp.task('serve', function(cb) {

  watch = true;

  runSequence('build', function() {
    browserSync({
      notify: false,
      // Customize the BrowserSync console logging prefix
      logPrefix: 'RSK',
      // Run as an https by uncommenting 'https: true'
      // Note: this uses an unsigned certificate which on first access
      //       will present a certificate warning in the browser.
      // https: true,
      server: {
        baseDir: DEST,
        // Allow web page requests without .html file extension in URLs
        middleware: function(req, res, cb) {
          var uri = url.parse(req.url);
          if (uri.pathname.length > 1 &&
            uri.pathname.lastIndexOf('/browser-sync/', 0) !== 0 &&
            !fs.existsSync(DEST + uri.pathname)) {
            if (fs.existsSync(DEST + uri.pathname + '.html')) {
              req.url = uri.pathname + '.html' + (uri.search || '');
            } else {
              res.statusCode = 404;
              req.url = '/404.html' + (uri.search || '');
            }
          }
          cb();
        }
      }
    });

    gulp.watch(src.assets, ['assets']);
    gulp.watch(src.images, ['images']);
    gulp.watch(src.pages, ['pages']);
    gulp.watch(src.styles, ['styles']);
    gulp.watch(DEST + '/**/*.*', function(file) {
      browserSync.reload(path.relative(__dirname, file.path));
    });
    cb();
  });
});

// Deploy to GitHub Pages
gulp.task('deploy', function() {

  // Remove temp folder
  if (argv.clean) {
    var os = require('os');
    var path = require('path');
    var repoPath = path.join(os.tmpdir(), 'tmpRepo');
    $.util.log('Delete ' + $.util.colors.magenta(repoPath));
    del.sync(repoPath, {force: true});
  }

  return gulp.src(DEST + '/**/*')
    .pipe($.if('**/robots.txt', !argv.production ? $.replace('Disallow:', 'Disallow: /') : $.util.noop()))
    .pipe($.ghPages({
      remoteUrl: 'https://github.com/{name}/{name}.github.io.git',
      branch: 'master'
    }));
});

// Run PageSpeed Insights
// Update `url` below to the public URL for your site
gulp.task('pagespeed', pagespeed.bind(null, {
  // By default, we use the PageSpeed Insights
  // free (no API key) tier. You can use a Google
  // Developer API key if you have one. See
  // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
  url: 'https://example.com',
  strategy: 'mobile'
}));

The problem arises when it tries to build the pages with the gulp pages command.

[09:14:44] Using gulpfile ~/gothart/gulpfile.js
[09:14:44] Starting 'pages'...
[09:14:45] Beautifying index.html
{ Error: Parse Error: Line 1: Unexpected token !
    at throwError (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2644:21)
    at throwUnexpected (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2706:9)
    at parseXJSIdentifier (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6807:13)
    at parseXJSElementName (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6844:16)
    at parseXJSOpeningElement (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6991:16)
    at parseXJSElement (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:7021:26)
    at parsePrimaryExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3352:20)
    at parseLeftHandSideExpressionAllowCall (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3436:61)
    at parsePostfixExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3476:20)
    at parseUnaryExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3543:16)
  index: 1,
  lineNumber: 1,
  column: 2,
  description: 'Unexpected token !',
  name: 'Error',
  message: 'Parse Error: Line 1: Unexpected token !',
  stack: 'Error: Parse Error: Line 1: Unexpected token !\n    at throwError (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2644:21)\n    at throwUnexpected (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2706:9)\n    at parseXJSIdentifier (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6807:13)\n    at parseXJSElementName (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6844:16)\n    at parseXJSOpeningElement (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6991:16)\n    at parseXJSElement (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:7021:26)\n    at parsePrimaryExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3352:20)\n    at parseLeftHandSideExpressionAllowCall (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3436:61)\n    at parsePostfixExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3476:20)\n    at parseUnaryExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3543:16)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-render' }

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: Parse Error: Line 1: Unexpected token !
    at throwError (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2644:21)
    at throwUnexpected (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2706:9)
    at parseXJSIdentifier (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6807:13)
    at parseXJSElementName (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6844:16)
    at parseXJSOpeningElement (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6991:16)
    at parseXJSElement (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:7021:26)
    at parsePrimaryExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3352:20)
    at parseLeftHandSideExpressionAllowCall (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3436:61)
    at parsePostfixExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3476:20)
    at parseUnaryExpression (/home/vbersier/gothart/node_modules/react-tools/node_modules/esprima-fb/esprima.js:3543:16)

I'm sure I'm just missing a small piece of the puzzle as the rest seems to build fine. I really hope someone can point me in the right direction, I'm happy to provide more information if needed! I might be able to identify which commit I cloned initially but I'd have to look in my harddrive backups.

Thanks in advance for any help!

[koistya]

Hey @beeb, you may try to remove $.jsbeautifier() step from Gulp config.

[beeb]

Hey thanks for the quick reply! I tried removing the jsbeautifier step as well as the whole htmlmin+jsbeautifier pipe step but the result is always the same. I think the error happens on the "render" step before that.

[koistya]

@beeb oh, you right. Is there a way you can run it using a VSCode debugger, stop an exception and check the stack track to see if it helps find exactly where the problem is?

https://code.visualstudio.com/docs/editor/debugging

[beeb]

Good idea! I'll check that and report back

[beeb]

Hey there,

I'm afraid VSCode cannot debug node v6 code...