create-react-app with ESM has errors after build/deploy

1239
4
01-06-2021 10:30 AM
KellyChan
New Contributor II

I'm testing ESM with a create-react-app -template typescript. The project run successfully locally in the dev environment. But when build and deployed, it doesn't draw any features, with errors below. Greatly appreciate any advices.

KellyChan_0-1609957462696.png

I'm testing with the sample from jsapi-resources. Converted to Typescript.

I installed tslib. And also tried tsconfig target from "ES2019" to "ES6".

4 Replies
ReneRubalcava
Frequent Contributor II

Take a look at our ESM samples on github.

https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app

 

We have a note about browserlist versions to use.

// package.json
{
  "browserslist": {
    "production": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
}

 

Unfortunately, CRA injects reqs for babel helpers into node_modules code, which I think is weird, but does cause some issues. Since you can't directly modify the webpack config, you can set the browserslist or as noted on that same page, use react-app-rewired to modify the config CRA uses.

0 Kudos
KellyChan
New Contributor II

Thanks @ReneRubalcava But these fixes didn't seem to help with -template typescript. Tried both browserlist & rewired.  

0 Kudos
afal
by
New Contributor

I have the the same problem exactly,, 
Tried setting the browserlist and it is not working.

any help?

 

0 Kudos
ReneRubalcava
Frequent Contributor II

This could be a specific issue with the CRA TypeScript template. I'll need to do some testing with it. An alternative is to see of using react-app-rewired will work. You may need to find the source webpack config for the typescript template to see where the babel loader is, it could differ from the default version.

0 Kudos