ReactJS es6コードをExpressアプリケーションにインポートするには？

私はReactJSアプリケーションをExpressJSを使用してサーバー上でレンダリングしたいと考えています。ReactJS es6コードをExpressアプリケーションにインポートするには？

のrequire（）を使用してES6モジュールをインポートできたとしても、モジュールがロードされるとES6コード（ES6のインポートとエクスポート）が含まれるため、モジュールがクラッシュします。

インデックスルート私の最初のhtmlを返す

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;

テンプレートコンポーネント：

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 - 私は文字列に

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は、ノードは、ES2015のimport文をサポートしていません

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

出典

2017-02-26 Zivanovic