async & regeneratorRuntime & (babel?)

[DrYSG]

Is this an issue with babel, or with parcel? I cannot figure that out.

Chrome V74 is complaining when I include this async method into my JSX react file:

 const fetcher = (async () => {
    const url = 'https://epicorapp2/ERP10.1Test/api/v1/Erp.BO.JobEntrySvc/GetNextJobNum'
    const rawResponse = await fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic xxxxx=',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({})
    });
    const nJob = await rawResponse.json()
    console.log(nJob)
    return nJob
  })();

Here is the trace:

react-lifecycles-compat.es.js:134 Uncaught ReferenceError: regeneratorRuntime is not defined
    at Object.parcelRequire.App.jsx.react (react-dom.development.js:21278)
    at newRequire (StyleRule.js:13)
    at localRequire (Controls.jsx:29)
    at Object.parcelRequire.Main.jsx.react (react-dom.development.js:21278)
    at newRequire (StyleRule.js:13)
    at redux.js:65
    at Popover.js:105

Here is my babelrc

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 1 versions"
                    ]
                }
            },
            "@babel/preset-react"
        ]
    ]
}

[DrYSG]

The babel developers have decided this is a parcel bug. I.e. they can use babel cli, the source files I provided them, and my .babelrc and create a valid bundle.

See issue: babel/babel#9971

and they cite an open issue with parcel:

#1762

[DrYSG]

BTW, the solution I am looking for should not load the regenerateRuntime. There is no reason to use it when one is targeting Google Chrome 74+ and MS Edge Chromium 76+

[niwinz]

It is not only related to regenerator, I have configured babelrc to use "last 1 Chrome version" that already supports class syntax, but when parcel generates the bundle it transpiles it to the old code using functions:

var Foo = function Foo(name) {
  _classCallCheck(this, Foo);

  this.name = name;
};
// [...]

when it should leave it untouched as it defined using ES6 classes:

class Foo {
  constructor(name) {
    this.name = name;
  }
}

I have tried to build the same code and the same .babelrc using babel-cli and the outout is correct with babel-cli. Seems like parcel does not respects the .babelrc file for some reasons. This is my .babelrc file:

{
  "presets": [
    ["@babel/preset-env", {"targets": {"browsers": "last 1 Chrome versions"}}],
    ["@babel/preset-react"]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

[mischnic]

@niwinz You should use .browserslistrc or the "browserslist" key in package.json to tell Parcel your target environment.
This works:

{
  "browserslist": ["last 1 Chrome versions"],
  "dependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "parcel-bundler": "^1.12.3"
  }
}

As for the regeneratorRuntime error, please follow #1762.

[DrYSG]

@niwinz Perfect. Thanks this is great. Now we can close this.

[niwinz]

I think parcel should respect the .babelrc config, ignoring it is counterintuitive...