CODEWITHSUNDEEP
javascriptnode.jsreactjsexpressecmascript-6
Zivanovic
Zivanovic

Reputation: 134

How to import ReactJS es6 code into Express app?

I want to render my ReactJS app initially on server using ExpressJS.

Even though I managed to import ES6 modules using require(), when module is loaded it crashes because that module contains ES6 code(ES6 import and export).

Index Route

var express = require('express');
var router = express.Router();

var React = require('react');
var ReactDOMServer = require('react-dom/server');

var App = require('../../src/app').default(); 
var template = require('../../src/template').default();

/* GET home page. */
router.get('/', function(req, res, next) {
    const appString = ReactDOMServer.renderToString(App)
    res.send(template({
        body: appString,
        title: 'Some title'
    }));
});

module.exports = router;

Template component which returns my initial html:

export default ({ body, title }) => {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>${title}</title>
        <link rel="stylesheet" href="/assets/index.css" />
      </head>

      <body>
        <div id="root">${body}</div>
      </body>

      <script src="/assets/bundle.js"></script>
    </html>
  `;
};

App.js - Component I want to turn into string

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        {this.props.children}
      </div>
    );
  }
}
export default App;

npm start

C:\Users\zivan\Desktop\weep\client\src\app.js:1
(function (exports, require, module, __filename, __dirname) { import React, { Component } from 'react';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\zivan\Desktop\weep\client\server\routes\index.js:7:43)
    at Module._compile (module.js:570:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node ./bin/www'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the server package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs server
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls server
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\zivan\Desktop\weep\client\server\npm-debug.log

Upvotes: 0

Views: 1541

Answers (2)

Ming Soon
Ming Soon

Reputation: 1018

You can use babel-node to compile ES6 code before running it.

But it is not meant for production use. You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.

Check out the example Node.js server with Babel for an idea of how to use Babel in a production deployment.

Upvotes: 2

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Node does not support ES2015 import statements. Use require.

This article can provide a full in-depth example of what you are trying to do:

https://blog.yld.io/2015/06/10/getting-started-with-react-and-node-js/#.WLJAsRIrJP0

Upvotes: 1

Related Questions