无法在react js中的chrome浏览器中编译

// 错误示例
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponet /> // 拼写错误
    </div>
  );
}

export default App;

// 正确示例
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent /> // 修正拼写错误
    </div>
  );
}

export default App;

npm install react react-dom

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

npm start

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// 更改端口
if (process.env.NODE_ENV === 'development') {
  const { createProxyMiddleware } = require('http-proxy-middleware');
  const express = require('express');
  const app = express();

  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );

  app.use(express.static('public'));

  app.listen(3001, () => {
    console.log('Server is running on port 3001');
  });
}