React 应用程序的 Webpack 再生器编译问题，请帮助我

Question

enter image description here enter image description here

       WARNING in ./src/pages/Home.jsx 41:24-43
    
    export 'default' (imported as 'React') was not found in 'react' (possible exports: __esModule)
     @ ./src/App.js 7:0-32 158:46-50
     @ ./src/index.js 6:0-24 7:97-100
    
    
    

    
    
      [1]: https://i.stack.imgur.com/0mRcJ.png
    
    
    


----------

I am using a lot of ES6 syntax and I realize on apple systems sometimes certain feature dont work. So I figure this will be killing two birds with one stone. Minimizing and optimizing. This issue is I am unsure what the issue is here.

My webpack.config.js

const path = require('path');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   
    
    module.exports = {
      target: ['web', 'es5'],
      entry: path.resolve(__dirname, 'src/index.js'),
      output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        
       
        
      },
    
      
     
     
       
      mode: "development",
      plugins: [new MiniCssExtractPlugin()],
      module: {
           rules: [
               {
                   test:/\.js$|jsx/,
                   use: ["babel-loader"],
                   
               },
    
               {
                test: /\.s[ac]ss$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader" ]
               },
    
               {
                test: /\.(png|svg|jpg|jpeg|gif|mp4)$/i,
                type: 'asset/resource',
              },
    
              {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
              }
    
           ]
    
        },
    
        devServer: {
               static: {
                 directory: path.resolve(__dirname,'public') ,
                 
                 
               },
               
    
                open: true,
                liveReload: true,
                port:8080,
                historyApiFallback:true,
                
              
             },
    
             resolve: {
               extensions: ['.js', '.jsx'],
               alias: {
                 components: path.resolve(__dirname, 'src/components'),
                 images: path.resolve(__dirname, 'src/images'),
                 pages: path.resolve(__dirname, 'src/pages'),
                 
                 
               }
             }
    
              
             
     
    
    
    }
    
    
    ----------















  

My babel-config.js

    module.exports = {
        presets: ['@babel/preset-env', '@babel/preset-react'],
    
    
        plugins: [
          [
              "@babel/plugin-proposal-class-properties",
              {
                  "loose": true
              }
          ],
          [
              "@babel/plugin-transform-runtime", 
              {
                  "asyncGenerators": true,
                  "generators": true,
                  "async": true
              }
          ],
          ["@babel/plugin-proposal-export-default-from"]
      ]
    
    
      };
    
    
    ----------
    









   

index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import "regenerator-runtime/runtime.js";
    import { BrowserRouter as Router } from 'react-router-dom';
    
    
    import './index.scss';
    
    
    import App  from './App'
    
    
    ReactDOM.render(
      <Router>
          <App />
      </Router>,
      document.getElementById('root')
    );
    
    
    ----------























   

components Home.jsx

    import  React from 'react';
    import Card from "../components/Card"
    
    
    const Home = ({
        items,
        searchValue,
        setSearchValue,
        onChangeSearchInput,
        onAddToFavorite,
        onAddToCart
              } ) =>{
        return (
           
                 <div className="content">
    
                    <div className="contentSearch">
                        <h1 className="titleContent">{searchValue ? `Поиск запроса: "${searchValue}"` : "Все кроссовки"}</h1>
                        <div className="searchBlock">
                            <img src="search.svg" alt="Search" width={14} height={14}></img>
                            {searchValue && <img src="clear.svg"
                                alt="Clear"
                                className="clear"
                                onClick={() => setSearchValue('')}
                            />}
                            <input onChange={onChangeSearchInput} value={searchValue} placeholder="Поиск..."></input>
                        </div>
                    </div>
    
    
    
    
                    <div className="sneakers" >
                        {items
                            .filter((item) => item.title.toLowerCase().includes(searchValue.toLowerCase()))
                            .map((item, index) => (
                                <Card
                                    key={index}
                                    onFavorite={onAddToFavorite}
                                    onPlus={onAddToCart}
                                    {...item}
                                />
                            ))}
    
    
    
    
    
    
                    </div>
    
    
                </div>
          
        )
    
    }
    export default Home;

Answer 1

npm i regenerator-runtime

and in webpack.config.js add this setting to entry:

 entry: ["regenerator-runtime/runtime", "./src/index.js"],