React Webpack not render DOM (regeneratorRuntime is not defined)

Question

it does not render DOM show error I can give my source code If it can help to solve the problem more easily

在此处输入图像描述

package.json

{
  "name": "BFproperty",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.46",
    "@material-ui/pickers": "^3.2.10",
    "@openfonts/prompt_all": "^1.44.0",
    "@openfonts/prompt_thai": "^1.44.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "autosuggest-highlight": "^3.1.1",
    "components-extra": "^2.6.1",
    "date-fns": "^2.12.0",
    "draft-js": "^0.11.5",
    "firebase": "^7.14.2",
    "google-maps-react": "^2.0.2",
    "i18next": "^19.3.3",
    "i18next-xhr-backend": "^3.2.2",
    "material-ui-dropzone": "^2.5.0",
    "material-ui-image": "^3.2.3",
    "react": "^16.12.0",
    "react-cookie": "^4.0.3",
    "react-dom": "^16.12.0",
    "react-draft-wysiwyg": "^1.14.4",
    "react-i18next": "^11.3.4",
    "react-image-gallery": "^1.0.7",
    "react-is": "^16.13.1",
    "react-lazyload": "^2.6.7",
    "react-number-format": "^4.4.1",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-simplemde-editor": "^4.1.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "styled-components": "^5.1.0",
    "typeface-prompt": "0.0.72"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "dev": "webpack-dev-server --open",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "path": "^0.12.7",
    "react-image-webp": "^0.7.0",
    "regenerator-runtime": "^0.13.5",
    "style-loader": "^1.2.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.11"
  }
}

serviceWorker.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { StyledProvider } from "components-extra";
import { Provider } from "react-redux";
import theme from "./Theme.js";
import store from "../src/redux/store/store";
ReactDOM.render(
  <StyledProvider theme={theme}>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </StyledProvider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.register();

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Webpack + React Setup</title>
</head>

<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>

</html>

webpack.config.js

const {
  resolve
} = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + "/src/index.html",
  filename: "index.html",
  inject: "body",
});
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: resolve(__dirname, "dist"),
  },
  plugins: [
    [HTMLWebpackPluginConfig],
    [
      "@babel/plugin-transform-runtime",
      {
        regenerator: true,
      },
    ],
  ],
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /(node_modules)/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }],
      },
      {
        test: /\.svg$/,
        exclude: /(node_modules)/,
        use: [{
          loader: "file-loader"
        }],
      },
    ],
  },
};

Answer 1

As the above image said the problem lies in the regeneratorRuntime . So to fix this according to this tread you should follow these steps:

First, add the babel transform to your project just like this:

npm i @babel/plugin-transform-runtime --dev
npm i @babel/runtime
or
yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/runtime

Then add the below snippet in your .babelrc

"plugins": [
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],

React Webpack not render DOM (regeneratorRuntime is not defined)

Question

1 answers

solution1
0 ACCPTED 2020-05-01 20:03:36

React Webpack not render DOM (regeneratorRuntime is not defined)

Question

1 answers

solution1 0 ACCPTED 2020-05-01 20:03:36

solution1
0 ACCPTED 2020-05-01 20:03:36