0

I'm using webpack and babel to transpile my ES6 javascript and React project to a bundle.js.

I'm getting this error:

bundle.js:90058: ERROR - Parse error. Semi-colon expected:
    return async function (dispatch) {

Why is the "async" keyword still in the final transpiled bundle.js?

Here is my babel.config.js:


module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                useBuiltIns: "entry",
                corejs: 3,
            }
        ],
        "@babel/preset-react"
    ],
    plugins: [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-async-to-generator",
        "react-hot-loader/babel",
    ]
};

In my root index.jsx file I have these two imports:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

The actual code in question is the following:

export const getUser = () => async (dispatch) => { ... }

...which gets transpiled to this:

var getUser = function getUser() {
    return async function (dispatch) {
        ...
    }
}

Is there some other configuration needed to convert those async/await keywords?

jaxreiff
  • 503
  • 1
  • 4
  • 14
  • If you are getting a parse error I don't think you are watching at your transpiled/bundled code. Code generation happens after code parsing. The error is probably showing you the line with the syntax error in you original code. – Johnny Zabala Feb 10 '20 at 03:23
  • @JohnnyZabala I'm going into the actual bundle.js file and finding the line there. The bundle.js shouldn't have the "async" syntax at all, right? – jaxreiff Feb 10 '20 at 04:26
  • perhaps a silly question, but why replace `async` with generators? They have the same level of support ("everything except IE11"), but rewriting `async` to generators increases your bundle's size considerably. – Mike 'Pomax' Kamermans Feb 10 '20 at 18:52
  • @Mike'Pomax'Kamermans Well, my code is failing builds because of that 'Parse error. Semi-colon expected' error. Is that transpiled code actually valid javascript (```return async function (dispatch) {}```)? If so my problem is different, and I need to figure out why that error is being thrown. – jaxreiff Feb 10 '20 at 21:43
  • That's perfectly valid JS, yes. The same way you can return an anonymous function using `return function (...) { ... };` (spacing between `function` and the parens are ignored), you can return an async function with `return async function (...) { ... }` – Mike 'Pomax' Kamermans Feb 10 '20 at 23:56

0 Answers0