@arcgis/core: create-react-app with typescript - when running build, error in console and no map renders

[gavinr]

@arcgis/core version: @arcgis/core@4.23.3

Framework and build tools Latest Create React App:

• "react": "^17.0.2",
• "react-dom": "^17.0.2",
• "react-scripts": "5.0.0",

Describe the bug I am trying to use the create react sample from this repo, but with the create react app typescript template.

Expected behavior After starting with the Create React App typescript template and using the code from the create react sample from this repo, when running npm run build it should create a build that works (map showing in the web browser) in the same way that it works when I run npm start.

Reproduce the issue

In the terminal:

npx create-react-app my-app --template typescript
cd my-app
npm install --save @arcgis/core

1. Copy contents of https://github.com/Esri/jsapi-resources/blob/master/esm-samples/jsapi-create-react-app/src/App.css to src/App.css
2. Copy contents of https://github.com/Esri/jsapi-resources/blob/master/esm-samples/jsapi-create-react-app/src/App.js to src/App.tsx
3. Copy contents of https://github.com/Esri/jsapi-resources/blob/master/esm-samples/jsapi-create-react-app/src/index.css to src/index.css
4. Run npm start - notice that the app works fine (map shows, no errors in browser console)
5. Stop the server

6. Run:

   npm run build
   serve -s build

   • Expected: web app should load the same as when it was running under npm start (map loads correctly)
   • Actual: browser shows a blank screen (no map showing) and error in console:

   Uncaught (in promise) TypeError: p is not a function
     at e.value (RenderingContext.js:5:23779)
     at e.value (RenderingContext.js:5:2866)
     at new e (RenderingContext.js:5:1458)
     at new i (Stage.js:5:2261)
     at c.value (MapView.js:5:17175)
     at c.<anonymous> (View.js:5:3490)
     at watch.js:5:2481
     at i (trackingUtils.js:5:281)
     at d (trackingUtils.js:5:795)
     at e.i [as _notify] (trackingUtils.js:5:288)

Browser

• Browser: 99.0.4844.84 (Official Build) (64-bit) (cohort: 99_Win_84)

Operating System:

• OS: Windows 10* 64-bit

[andygup]

Thanks for letting us know @gavinr, we'll take a look.

[andygup]

@gavinr thanks to some sleuthing by @odoe, the issue seems to be the browserslist.

Can give this a try?

  "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"
    ]
  }

And just an FYI, here's an example of the full .browserslistrc we use for the samples: https://github.com/Esri/jsapi-resources/blob/master/esm-samples/jsapi-angular-cli/.browserslistrc

[gavinr]

Ah, yes it definitely looks like that's it. And that is here, sorry I missed it. (but it is easy to miss buried in the package.json) Thanks!!

(Just out of curiosity, do you know why the default CRA settings for browserslist.production causes the JS API error?)

[andygup]

@gavinr yep, the browserslist can affect/trigger transpiling, so it may result in a build containing features that aren't supported in your browser.

It can also affect bundle sizes. Typically targeting newer browsers results in smaller bundle sizes.