CODEWITHSUNDEEP
node.jsreactjsecmascript-6babeljsisomorphic-javascript
cuadraman
cuadraman

Reputation: 15154

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)?

Upvotes: 2

Views: 1501

Answers (1)

Alexandre Kirszenberg
Alexandre Kirszenberg

Reputation: 36408

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.

Upvotes: 2

Related Questions