The babel preset @babel/preset-react doesn't like my javascript function that returns a JS.X element

Question

I have a .js file with react imported with a function that returns a span tag like so:

makeSpan = (number, prefix) => { 
  return <span>{prefix} {number}</span>
};

I will require this .js file to my react class and call it to render the span. The problem is that webpack is giving my syntax error unexpected token and apparently it's something to do with JSX syntax (returning a span)

webpack.config.js

const path = require('path')
HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html'
    })
  ]
}

babelrc

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

Answer 1

I solved this problem my solution was to put babel plugins in webpack.config.js as well. I don't know why it works this way.

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["@babel/plugin-proposal-class-properties"]
          }
        }
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },