个人中心
gpt4 book ai didi

javascript - Webpack 2 目标 Node 不编译 JSX

转载 作者：搜寻专家 更新时间：2023-10-31 23:59:45 24 4
gpt4 key购买 nike

我正在使用 React 构建一个通用 JS 应用程序，并且我正在使用 webpack 2 来捆绑我的服务器端代码。

在构建服务器端代码时，webpack 似乎没有转译 JSX，因为我收到以下错误:

I made a repo to reproduce the error .克隆它，点击 npm install 然后在终端上 npm run 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

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

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

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);
  })
}

最佳答案

你告诉 Webpack 将 .jsx 文件传递​​给 Babel 加载器:

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

但是，您的 JSX 包含在 .js 文件中，例如 server/router.js，因此您应该扩展测试以匹配 .js 和 .jsx:

test: /\.jsx?$/

此外，您必须从 Babel 加载器配置中删除 include 属性，因为这意味着应该由加载器处理的文件必须存在于 ./shared 目录，而 ./server/router.js 没有。

关于javascript - Webpack 2 目标 Node 不编译 JSX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39161325/

24 4 0
文章推荐： node.js - 在 Node 中发送 FCM 推送
文章推荐： php - PHP include() 的限制
文章推荐： PHP - HTML 形成两种可能的操作？
文章推荐： javascript - Hapijs 查询参数未定义
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com