Поддержка экспериментального синтаксиса jsx в настоящее время не включена при использовании webpack и babel - PullRequest
Новая
       35

Поддержка экспериментального синтаксиса jsx в настоящее время не включена при использовании webpack и babel

2 голосов
/ 12 июля 2020

Я работаю над созданием SSR-сервера для проекта реакции CRA (create-react-app). Но при выполнении '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`);
})

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"
}

.babelr c 

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

Сообщение об ошибке: Изображение сообщения об ошибке

Я пробовал много существующих решений этой проблемы (их немного), поскольку вы видите список плагинов в .babelr c файл, но ничего не сработало.

Но когда я переместил файлы в каталог server в соответствии с файлом приложения. js в каталог sr c, ошибки не произошло. Я хочу знать причину возникновения такой ситуации.

1 Ответ

0 голосов
/ 01 сентября 2020

Посмотрите сюда: Поддержка экспериментального синтаксиса 'jsx' в настоящее время не включена

Возможно, что-то не так в вашем package.json: 

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