How to compile ES6 node and jsx code into ES5 vanilla JS

Question

I have a project that works fine in dev using babel-node to run the server.

However after trying for 2 days, I can't get it compiled to ES5.

I tried running babel, but that didn't include the dependencies. I tried creating a webpack config just for the server, but I'm currently stuck with the error:

fs.js:634
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
             ^
Error: ENOENT: no such file or directory, open '/types/mime.types'

The webpack configuration im using for the server is nearly identical to the one I use for compiling my client code [which works 100%]:

var webpack = require('webpack');
var path = require('path');
var WebpackNotifierPlugin = require('webpack-notifier');

var BUILD_DIR = path.resolve(__dirname, 'static');
var APP_DIR = path.resolve(__dirname, 'src');
var DATA_DIR = path.resolve(__dirname, 'json');

module.exports = {
    target: "node",
  devtool: 'source-map',
  // This will be our app's entry point (webpack will look for it in the 'src' directory due to the modulesDirectory setting below). Feel free to change as desired.
  entry: [
    APP_DIR + '/server.js',
  ],
  // Output the bundled JS to dist/app.js
  output: {
    path: BUILD_DIR,
    filename: 'prod-server.js',
  },
    node: {
      fs: "empty",
        net: "empty"
    },
  module: {
    loaders: [
      { test: /\.jsx?$/, loaders: ['babel'], include: APP_DIR },
      { test: /\.json$/, loaders: ["json-loader"] }
    ]
  },
  plugins: [
    // Set up the notifier plugin - you can remove this (or set alwaysNotify false) if desired
    new WebpackNotifierPlugin({ alwaysNotify: true }),
  ]
};

If babel-node well run things without a hitch, there must be an easier way to compile the server to ES5 that node can run.

EDIT: The full stack trace of error:

fs.js:634
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/types/mime.types'
    at Error (native)
    at Object.fs.openSync (fs.js:634:18)
    at Object.fs.readFileSync (fs.js:502:33)
    at a.load (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:505)
    at Object.<anonymous> (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:934)
    at Object.<anonymous> (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:1129)
    at t (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:169)
    at Object.e.exports (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:29:2855)
    at t (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:169)
    at Object.n (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:7248)

As per http://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express I altered my webpack config and got a different error, which is maybe progress? It's more informative than the first: "return binding.stat(pathModule._makeLong(path)); no such file or directory, stat '/favicon.ico'" It makes me think that this 'pathModule._makeLong' isn't making the path long... and so node is looking for these files in the wrong places. — Sophie McCarrell, Oct 19 '16 at 01:41
oh and then i see "https://github.com/webpack/webpack/issues/1599"... anyways im still looking for solutions. EDIT: the server is running!!!! let me see if any thing loads... — Sophie McCarrell, Oct 19 '16 at 01:43
Ok, so the server works, but nothing loads, but I think that's because I've been messing a lot with the paths to try and get things to work. After i get things working, I'll try and boil the problem down and write a solution... it was not simple... and IMO shame on the babel people for not providing a simple solution and forcing someone to use a different tool just to get compiled source. EDIT: Also regardless of it working there are a million warnings... — Sophie McCarrell, Oct 19 '16 at 01:48
It works... React is complaining about minified file and no production env var, but I've solved that before in a different situation, so no biggie. I'll be back in an hour and I'll boil down the solution and add it. I'll leave this open for a bit before choosing my answer as the correct one, because it doesn't feel like a good answer. It should have been as simple as "babel server.js --presets react,es6" or whatever — Sophie McCarrell, Oct 19 '16 at 01:53

score 0 · Answer 1 · answered Oct 19 '16 at 01:07

0

You may use the babel-cli to compile it. You have to install the preset es2015 and react in order for babel knowing how to compile it. And setup the .babelrc file

See https://babeljs.io/docs/usage/cli/ and https://babeljs.io/docs/setup/ (choose the cli) for more detail.

answered Oct 19 '16 at 01:07

Tony Yip

705
5
14

Thanks, but this was obviously the first thing I did. Simply running babel as-is makes a tiny file only for the server and doesn't follow any imports, then when i run the outputted file it says it can't find the first module file I had imported. – Sophie McCarrell Oct 19 '16 at 01:23
This is the more standard Babel approach for Node, but generally you'd have all your code in a `src` directory and compile the whole directory. Babel does not follow imports, as you said. – loganfsmyth Oct 19 '16 at 04:53

score 0 · Accepted Answer · edited May 23 '17 at 10:30

To compile node code a number of configuration adjustments needed to be made to webpack. First I needed to put my server in a directory above node_modules, ie. in my src folder, rather than root project directory.

To get past mime type error I needed to add the following code, which I found @ How can I use webpack with express? :

var nodeModules = {};
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
    .filter(x => ['.bin'].indexOf(x) === -1)
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

Then all of the additional configs needed (also see https://github.com/webpack/webpack/issues/1599%22):

target: "node",
externals: nodeModules,
node: {
    fs: "empty",
    net: "empty",
    __dirname: false,
    __filename: false,
}

I'd still prefer a simple babel-cli solution, but this worked.

careful with this solution if you have private organisation packages will not be included, as are store in node_modules/@organisation/packageName You can add them "manually" right after readdirSync. With `nodeModules['@myorg/mypackage'] = 'commonjs mypackage'` — alfonsodev, Nov 13 '16 at 16:17

How to compile ES6 node and jsx code into ES5 vanilla JS

2 Answers2