Webpack 2目标节点不编译JSX

Question

I'm building a Universal JS app with React and I'm using webpack 2 to bundle my server side code. 我正在用React构建一个Universal JS应用程序，我正在使用webpack 2捆绑我的服务器端代码。

When building the server side code, it seems that webpack isn't transpiling JSX because I'm getting the following error: 在构建服务器端代码时，似乎webpack没有转换JSX，因为我收到以下错误：

I made a repo to reproduce the error . 我做了一个repo来重现错误。 Clone it, hit npm install and then npm run build:backend on the terminal 克隆它，点击npm install ，然后在终端上运行build：backend

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 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')
        }
      ]
    }
  }
}

server.js 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');
});

server/router.js 服务器/ 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);
  })
}

Answer 1

You're telling Webpack to pass .jsx files to the Babel loader: 你告诉Webpack将.jsx文件传递给Babel加载器：

test: /\.jsx$/,
loader: 'babel',

However, your JSX is contained within .js files, like server/router.js , so you should expand the test to match both .js and .jsx : 但是，您的JSX包含在.js文件中，如server/router.js ，因此您应该扩展测试以匹配.js和.jsx ：

test: /\.jsx?$/

Also, you have to remove the include property from the Babel loader configuration, because it means that the files that should be processed by the loader must exist in the ./shared directory, and ./server/router.js doesn't. 此外，您必须从Babel加载程序配置中删除include属性，因为这意味着加载程序应处理的文件必须存在于./shared目录中，而./server/router.js则不存在。

Webpack 2目标节点不编译JSX

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-08-26 08:07:48

Webpack 2目标节点不编译JSX

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-26 08:07:48

解决方案1
1 已采纳 2016-08-26 08:07:48