I am trying to initially render my ReactJS application on the server using ExpressJS.
Although I have been able to import ES6 modules using require(), the module crashes upon loading because it 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 that generates 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 to transform into a 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! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aad9cfd8dccfd8ea9a849a849a">[email protected]</a> start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f1e7f0f4e7f0c2b2acb2acb2">[email protected]</a> 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