3
ReactでUniversal JSアプリケーションを構築していますが、webpack 2を使用してサーバーサイドコードをバンドルしています。Webpack 2ターゲティングノードがJSXをコンパイルしない
I made a repo to reproduce the error：
サーバー側のコードをビルド
が、私が次のエラーを取得していますので、WebPACKのはJSXをtranspilingされていないようです。ターミナルERROR in ./server/router.js
Module parse failed: webpack-target-node\server\router.js Unexpected token (8:31)
You may need an appropriate loader to handle this file type.
| export default (req, res) => {
| match({ routes, location: req.url }, (err, redirect, props) => {
| const app = renderToString(<RouterContext {...props} />);
|
| const html = `
@ ./server.js 3:0-46
webpack.config.node.js上のバックエンド
const webpack = require('webpack');
const { resolve } = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports =() => {
return {
target: 'node',
entry: './server.js',
output: {
path: resolve(__dirname, 'serverBuild'),
filename: 'server.js'
},
resolve: {
extensions: [ '', '.js' ]
},
externals: [ nodeExternals() ],
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel',
query: {
presets: [ 'react', 'stage-0' ]
},
exclude: /node_modules/,
include: resolve('./shared')
}
]
}
}
}
：それを複製、はNPM、その後NPMの実行ビルドをインストールヒットserver.js
import express from 'express';
import routeMiddleware from './server/router';
const app = express();
app.use('/', express.static(`${__dirname}/build`));
app.use(routeMiddleware);
app.listen(3000,() => {
console.log('Node server is running on http://localhost:3000');
});
サーバー/ router.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import router from '../shared/routes'
export default (req, res) => {
match({ routes, location: req.url }, (err, redirect, props) => {
// here is where the building process fails
const app = renderToString(<RouterContext {...props} />);
const html = `
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="react-app">${app}</div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>`;
res.send(html);
})
}
あなたの答えをありがとう、それでも問題を解決していない、同じエラーをスロー：（ –
@AbrahamHurtado私の問題を発見した、私の編集を参照してください（あなたのWebpack設定の 'include'プロパティに関する） – robertklep
OMG、それはやった！ありがとう！:) –