使用 webpack 和 babel 时，当前未启用对实验语法“jsx”的支持

Question

使用 webpack 和 babel 时，当前未启用对实验语法“jsx”的支持

我正在为 CRA(create-react-app) 反应项目创建 SSR 服务器。但是，当我执行“npx webpack”时出现错误。

服务器.js

import React from 'react';
import {renderToString} from "react-dom/server";
import express from 'express';

import App from '../src/App.js';

const doc = content => `
<!doctype html>
<html>
<head>
<title>Rendering to strings</title>
</head>
<body>
<div id="app">${content}</div>
</body>
</html>`;

const app = express();

app.get('/', (req,res)=>{
    const props = {
        items: ['One','Two','Three']
    };
    const rendered = renderToString(<App {...props}/>);
    res.send(doc(rendered));
})

app.listen(8080, ()=>{
    console.log(`listening on localhost:8080`);
})

Run Code Online (Sandbox Code Playgroud)

webpack.config.js

const path = require('path');

module.exports = {
    entry: './server.js',
    output: {
        filename: 'app-translated.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    target: "node"
}

Run Code Online (Sandbox Code Playgroud)

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-react-jsx"
  ]
}

Run Code Online (Sandbox Code Playgroud)

错误信息：错误信息图片

当您在 .babelrc 文件中看到插件列表时，我尝试了许多解决此问题的现有解决方案（不多），但没有任何效果。

但是，当我将 'server' 目录中的文件与 'src' 目录中的 App.js 文件一致时，没有发生错误。我想知道发生这种情况的原因。

Answer 1

小智 0

只需查看此处：当前尚未启用对实验性语法“jsx”的支持

也许你的有问题package.json：

--- "main": "index.js"
+++ "main": "./build/index.js"

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，6 月前
查看次数：	4613 次
最近记录：	5 年，5 月前