title: Require file with a variable in React JS
body: <p>I'm trying to require a file with a variable in the path. Something like</p>
  
  <pre><code>const langCode = this.props.langCode; // en
  let languageFile = require('../common/languages/' + langCode);
  </code></pre>
  
  <p>Where <strong>langCode</strong> can be fr, en, de, nl. Thus what I'm trying to get is for example</p>
  
  <pre><code>require('../common/languages/en'); 
  </code></pre>
  
  <p>When I type it without variable at the end, thus <code>require('../common/languages/en');</code> it works good. But when I try with <code>require('../common/languages/' + langCode);</code> it won't work, doesn't matter that the value of the <strong>langCode</strong> is also <strong>en</strong>.</p>
  
  <p>I get next error : </p>
  
  <p><em>bundle.js:1 Uncaught Error: Cannot find module '../common/languages/en'</em></p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>    'use strict';
  
  var gulp = require('gulp');
  var connect = require('gulp-connect');
  var open = require('gulp-open');
  var browserify = require('browserify');
  var source = require('vinyl-source-stream');
  var concat = require('gulp-concat');
  var babelify = require('babelify');
  var sass = require('gulp-sass');
  var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
  var lint = require("gulp-eslint");
  
  var config = {
      port: 8001,
      devBaseUrl: 'http://localhost',
      paths: {
          html: "./src/*.html",
          externals: "./src/assets/externals/*.js",
          js: "./src/**/*.js",
          images: './src/assets/images/**/*',
          fonts: './src/assets/css/fonts/*',
          css: [
              "./src/assets/css/*.css",
              "./node_modules/toastr/package/toastr.css"
          ],
          sass: './src/assets/css/*.scss',
          dist: "./dist",
          mainJS: "./src/main.js"
      }
  };
  
  
  gulp.task('connect', ['watch'], function () {
      connect.server({
          root: ['dist'],
          port: config.port,
          base: config.devBaseUrl,
          livereload: true,
          fallback: './dist/index.html'
      })
  });
  
  gulp.task('open', ['connect'], function () {
      gulp.src('dist/index.html')
          .pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
  });
  
  
  gulp.task('html', function () {
      gulp.src(config.paths.html)
          .pipe(gulp.dest(config.paths.dist))
          .pipe(connect.reload());
  });
  
  
  gulp.task('externals', function () {
      gulp.src(config.paths.externals)
          .on('error', console.error.bind(console))
          .pipe(concat('external.js'))
          .pipe(gulp.dest(config.paths.dist + '/externals'))
          .pipe(connect.reload());
  });
  
  
  gulp.task('js', function () {
      browserify(config.paths.mainJS)
          .transform('babelify', {presets: ['es2015', 'react']})
          .bundle()
          .on('error', console.error.bind(console))
          .pipe(source('bundle.js'))
          .pipe(gulp.dest(config.paths.dist + '/scripts'))
          .pipe(connect.reload());
  });
  
  
  gulp.task('images', function () {
      gulp.src(config.paths.images)
          .pipe(gulp.dest(config.paths.dist + '/images'));
  });
  
  
  gulp.task('styles', function () {
      var cssStyles = gulp.src(config.paths.css)
          .pipe(concat('styles.css'));
  
      var sassStyles = gulp.src(config.paths.sass)
          .pipe(sass())
          .pipe(concat('styles.scss'));
  
      var mergedStream = merge(cssStyles, sassStyles)
          .pipe(concat('bundle.css'))
          .pipe(gulp.dest(config.paths.dist + '/css'))
          .pipe(connect.reload());
  
      return mergedStream;
  });
  
  gulp.task('fonts', function () {
      gulp.src(config.paths.fonts)
          .pipe(gulp.dest(config.paths.dist + '/css/fonts'));
  });
  
  gulp.task('lint', function () {
      return gulp.src(config.paths.js)
          .pipe(lint())
          .pipe(lint.format());
  });
  
  
  gulp.task('watch', function () {
      gulp.watch(config.paths.html, ['html']);
      gulp.watch(config.paths.js, ['js', 'lint']);
      gulp.watch(config.paths.externals, ['externals', 'lint']);
      gulp.watch([config.paths.css, config.paths.sass], ['styles']);
      gulp.watch(config.paths.images, ['images']);
  });
  
  gulp.task('default', ['html', 'js', 'styles', 'externals', 'images', 'fonts', 'lint', 'open', 'watch']);
  </code></pre>