ES6 features complient

Question

Hi I am having problems to change require to import statements. My all files are supporting arrow functions and const, let etc. Just when I change require statements to import I am having lot of trouble.

Following are my files:

My Grunt file:

const request = require('request');
const webpackConfigDev = require('./webpack.config.dev');
const webpackConfigProd = require('./webpack.config.prod');

module.exports = function init(grunt) {
  require('time-grunt')(grunt);
  require('load-grunt-tasks')(grunt);

  const reloadPort = 35729;
  let files;

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    eslint: {
      target: ['app/**/*.js', 'clientSide/**/*.js', 'config/**/*.js',
        'test/**/*.js', 'app.js', 'Gruntfile.js'],
    },
    webpack: {
      options: {
        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
      },
      prod: webpackConfigProd,
      dev: Object.assign({ watch: true }, webpackConfigDev),
    },

    mocha_istanbul: {
      coverage: {
        src: 'test/**/*.js',
        options: {
          check: {
            statements: 85,
            functions: 85,
            branches: 77,
          },
          excludes: [
            'app.js',
            'config/*',
            'migrations/xyz/*',
            'app/models/*',
          ],
        },
      },
    },
    mochaTest: {
      test: {
        options: {
          quiet: false,
          noFail: false,
        },
      },
      src: ['test/spec/**/*.js'],
    },
    develop: {
      server: {
        file: 'app.js',
      },
    },
    stylus: {
      dist: {
        files: {
          'public/css/style.css': 'public/css/style.styl',
        },
      },
    },


  grunt.config.requires('watch.js.files');
  files = grunt.config('watch.js.files');
  files = grunt.file.expand(files);

  // Load the npm dependencies into grunt
  grunt.loadNpmTasks('grunt-mocha-test');
  grunt.loadNpmTasks('grunt-mocha-istanbul');

  // Load webpack plugin npm tasks.
  grunt.loadNpmTasks('grunt-webpack');

  grunt.registerTask('delayed-livereload', 'Live reload after the node server has restarted.',
    () => {
      const done = this.async();
      setTimeout(() => {
        request.get(`http://localhost:${reloadPort}/changed?files=${files.join(',')}`,
          (err, res) => {
            const reloaded = !err && res.statusCode === 200;
            if (reloaded) {
              grunt.log.ok('Delayed live reload successful.');
            } else {
              grunt.log.error('Unable to make a delayed live reload.');
            }
            done(reloaded);
          });
      }, 500);
    });

  grunt.registerTask('test', [
    'env:test',
    'eslint',
    'mocha_istanbul',
  ]);

  grunt.registerTask('build', [
    'env:dev',
    'eslint',
    'stylus',
    'webpack',
    'mocha_istanbul',
    'develop',
  ]);

  // The default task just runs the project on dev
  grunt.registerTask('default', [
    'build',
    'watch',
  ]);
};

I just changed from const to import in my .js file but this is not running. When running for coverage then all the problem starts. Please help me out. I have been trying to solve this from 2 days.

Answer 1

If you are adventurous and really want to use Modules in Node.js, there is a way. Node.js 8.5 added experimental support for ES Modules . The documentation on how to use it can be found in ECMAScript Modules . Here are the essentials:

• Use Node.js 8.5 or higher
• Use the --experimental-modules flag
• Use the .mjs extension on your module files

Answer 2

While import is part of ES6, it is not yet supported in NodeJS, and has only very recently became available in browsers. So you will have to keep your require statements. See this for further info

Answer 3

use babel loader and presets in you webpack config for transpiling es5 to es6. Essentially

Further, make a webpack entry for server also. At present, you are using webpack for client only, hence servere code is not getting transpilled. Server config will be similar. Please follow the link, and specifically make following changes in its values

target: 'node',

  entry: {
    server: ['babel-polyfill', './src/server.js'],
  }