ES6 React server-side rendering, how to import a React Component?


I'm transpiling ES6 to ES5.

  1. BabelJS for the NodeJS Express server files and server-side rendering output to a directory build/server/.
  2. Browserify + babelify for the ReactComponents output to a build/client/bundle.js file

When trying to import a React Component from build/client/bundle.js to a build/server/ file the app crashes because I'm importing an untranspiled ReactComponent.

How could I import the ReactComponent without duplicating the code in the server (re-using the code from the client/bundle.js)?

By : cuadraman


You have a few solutions:

  • Your server code doesn't need to be pre-compiled. If you run it with babel-node, it will be compiled on-the-fly.

  • You could bundle your server code. I don't know any resource on how to do it with browserify, but here's a very good resource to get started with webpack for your backend.

  • You could build your client code alongside your server code.

This video can help you solving your question :)
By: admin