Support for the experimental syntax 'jsx' isn't currently enabled when using webpack and babel

I'm working on creating SSR server for CRA(create-react-app) react project. But, an error has occured when I execute 'npx webpack'.

This is the picture of my directory tree. My file directory

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

.babelrc

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

Error Message : Error Message picture

I tried many existing solution to this problem(not many) as you see plugin list in .babelrc file but nothing worked.

But when I moved files in the 'server' directory in line with App.js file in 'src' directory, the error doesn't occured. I want to know the reason why this kind of situation occured.