topic Re: create-react-app with ESM has errors after build/deploy in ArcGIS JavaScript Maps SDK Questions

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

KellyChan — Wed, 06 Jan 2021 18:30:20 GMT

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.

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

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

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

ReneRubalcava — Thu, 07 Jan 2021 17:26:30 GMT

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.

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

KellyChan — Fri, 08 Jan 2021 17:53:28 GMT

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

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

afal — Sun, 17 Jan 2021 10:19:17 GMT

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

any help?

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

ReneRubalcava — Mon, 18 Jan 2021 17:45:36 GMT

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.