---
title: "Discussion on \"Setting Up React, Webpack 4 & Babel 7 from scratch — 2021\" | Hashnode"
description: "Discussion on \"Setting Up React, Webpack 4 & Babel 7 from scratch — 2021\". react,react to,react video,jsx,react native,react js,material ui,react router,createreactapp,react bootstrap,react hooks,react query,react tutorial,react"
url: "https://hashnode.com/posts/setting-up-react-webpack-4-and-babel-7-from-scratch-2021/5f99b977ae41043093cdb86d"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Setting Up React, Webpack 4 & Babel 7 from scratch — 2021](https://djaytechdiary.com/setting-up-react-webpack-4-and-babel-7-from-scratch-2021?utm_source=hashnode&utm_medium=feed)

react,react to,react video,jsx,react native,react js,material ui,react router,createreactapp,react bootstrap,react hooks,react query,react tutorial,react

Oct 28, 2020 · 5 min read · djaytechdiary.com  
Updated Jan 23, 2023  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#nodejs](https://hashnode.com/tag/nodejs)
-   [#web-development](https://hashnode.com/tag/web-development)

## Written by

[Jay Desai](https://hashnode.com/@desaijay)

@desaijay · Mumbai

  
[View profile](https://hashnode.com/@desaijay)

Be useful rather than just purposeful

Hey there! I'm Jay. 👨🏻‍💻 About Me 🤔 Exploring new technologies and developing software solutions and quick hacks. 🎓 Bachelors of Engineering from Mumbai University. 🌱 Learning more about Cloud Architecture, Systems Design and Artificial Intelligence. ✍️ Pursuing Blog Writing as hobbies/side hustles. 🛠 Tech Stack 🌐 JavaScript | Bootstrap | Node.js | ReactJS 💻 DevOps | Cloud | CI/CD | AWS | AZURE 🛢 MySQL | MongoDB | PostgreSQL 🔧 Git | Markdown

## Responses 1

Markdown supported · ⌘↵ to post

[JimmyLv\_吕立青](https://hashnode.com/@jimmylv)

[Oct 29, 2020](https://hashnode.com/posts/setting-up-react-webpack-4-and-babel-7-from-scratch-2021/5f99b977ae41043093cdb86d/comment/5f9a67a7ae41043093cdbfef)

Do we still need @babel/runtime and @babel/plugin-transform-runtime if we need to use (Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise、Object.assign) the new JavaScript Syntax after applying @babel/preset-env?

[Jay Desai](https://hashnode.com/@desaijay)

[Oct 29, 2020](https://hashnode.com/posts/setting-up-react-webpack-4-and-babel-7-from-scratch-2021/5f99b977ae41043093cdb86d/comment/5f9a67a7ae41043093cdbfef#reply-5f9a7ec41646ee3072b6e563)

Hey [吕立青](https://hashnode.com/@jimmylv), Great question. We need to use @babel/preset-env which transforms syntax. We need to use @babel/transform-runtime to avoid duplicate code, and config core-js: 3 to polyfill.

babel-plugin-transform-runtime automatically injects Regenerator where generators or async/await are used.

So, installing babel/runtime and @babel/plugin-transform-runtime will solve your problem.

So, what you can do is,

```
yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/runtime
```

and in .babelrc, you can add this plugin.

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

**By default regenerator is true**