Webpack не распознает синтаксис JSX

Question

У меня есть следующая конфигурация Webpack:

... 
module: {
    rules: [
        {
            test: /.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/,
            options: {
                presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
                plugins: [
                    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
                    '@babel/plugin-proposal-class-properties'
                ]
            }
        },
        {
            test: /\.scss$/,
            loader: 'ignore-loader'
        },
        {
            test: /\.css$/,
            loader: 'ignore-loader'
        },
        {
            test: /\.(jpg|png|svg|gif|pdf)$/,
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]'
            }
        }
    ]
}

Все же я получаю следующую ошибку:

        <StaticRouter location={path} context={context}>
        ^

SyntaxError: Unexpected token <

Я использую это в моем рендерере:

const renderer = (html, path, context) => {
    const serverHtml = ReactDOM.renderToString(
        <StaticRouter location={path} context={context}>
            <Layout />
        </StaticRouter>
    );
    const regex = /(<div id="root">)(<\/div>)/;
    return html.replace(regex, function(original, div1, div2) {
        return div1 + serverHtml + div2;
    });
};

Я называю это здесь простым тестом:

app.get("*", function(req, res) {
    fs.readFile("./src/server/html/index.html", "utf8", function(err, data) {
        const context = {};
        const html = renderer(data, req.path, context);
        console.log(html);
        res.send(html);
    });
});

Это мои dev-зависимости (package.json):

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.18.11",
    "sass-loader": "^7.1.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-hot-server-middleware": "^0.6.0",
    "webpack-node-externals": "^1.7.2"
  }

Не стоит ли позаботиться о пресете @babel/preset-reactиз этого?

На самом деле, чисто выполнение веб-пакета в файле конфигурации не выдает никаких ошибок.
Я пытаюсь выполнить горячую перезагрузку и SSR, для чего я используюпакеты, упомянутые в package.json.

Я получаю сообщение об ошибке при запуске приложения и использовании следующего промежуточного программного обеспечения:

const app = express();

if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
    const config = require('../../webpack.development.config'); //Contains both client and server webpack config

    // Webpack dev hot reload middleware
    const compiler = webpack(config);
    app.use(webpackDevMiddleware(compiler, {
        serverSideRender: true,
        stats: {colors: true}
    }));

    app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
    app.use(webpackHotServerMiddleware(compiler));

}

Примечание:
На самом деле, причина, по которой я получаю эту ошибку, заключается в том, что я должен сначала перенестикод с Webpack.Импорт не работает, потому что, очевидно, синтаксис JSX не может быть понят NodeJS.
Хотя это не решает мою проблему.Пакет npm, который я использую, выполняет webpack во время выполнения после того, как импорт уже произошел.
Так что либо вы можете найти способ решить эту проблему, либо я предполагаю, что не смогу использовать синтаксис jsx...

Answer 1

Вы не можете предоставить оба правила , как вы сделали здесь:

include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,

Исключение переопределит включение. Чтобы иметь «оба», нужно написать это так:

exclude: /node_modules\/(?!react)/

Вам также необходимо указать параметр entry для src/index.js.