Uncaught TypeError: Cannot read properties of undefined (reading '0')

[Simoneth]

Hi, I downloaded my selection.json and inserted it correctly in path, there is a "pencil" named icon in it. So I used <Icon icon="pencil" size={20} color="orange" /> and got this:

index.tsx:82 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at index.tsx:82:1
    at Array.map (<anonymous>)
    at IcoMoon (index.tsx:81:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)

the above error occurred in the <IcoMoon> component:

    at IcoMoon (http://localhost:3000/static/js/2.chunk.js:16958:20)
    at Icon
    at form
    at ReactFinalForm (http://localhost:3000/static/js/3.chunk.js:1727:20)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:364808:86)
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Card (http://localhost:3000/static/js/vendors~main.chunk.js:345325:86)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:353724:91)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:353724:91)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:348606:86)
    at Datatable (http://localhost:3000/static/js/50.chunk.js:423:90)
    at Admin (http://localhost:3000/static/js/50.chunk.js:1787:52)
    at Suspense
    at B (http://localhost:3000/static/js/vendors~main.chunk.js:556649:10)
    at BaseLayout (http://localhost:3000/static/js/main.chunk.js:6268:5)
    at LocalizationProvider (http://localhost:3000/static/js/vendors~main.chunk.js:337110:5)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:397702:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:392324:5)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:397722:5)
    at StylesProvider (http://localhost:3000/static/js/vendors~main.chunk.js:394935:5)
    at ThemeProviderWrapper (http://localhost:3000/static/js/main.chunk.js:11166:92)
    at App (http://localhost:3000/static/js/main.chunk.js:124:85)
    at x (http://localhost:3000/static/js/vendors~main.chunk.js:556667:13)
    at w (http://localhost:3000/static/js/vendors~main.chunk.js:555238:13)
    at SidebarProvider (http://localhost:3000/static/js/main.chunk.js:1098:5)
    at r (http://localhost:3000/static/js/vendors~main.chunk.js:552458:19)

"react": "17.0.2", "react-scripts": "4.0.3"

[aykutkardas]

Are you sure you are using the selection.json file that came with the font when you downloaded it?

---

Soon there will be an easier way to generate this file outside of icomoon.

[Simoneth]

Are you sure you are using the selection.json file that came with the font when you downloaded it?

Soon there will be an easier way to generate this file outside of icomoon.

Yes, I'm a React developer and I did everything as documented here.

[aykutkardas]

Can you share the contents of your selection.json file?

[Simoneth]

Here we go:

{
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        "paths": [
          "M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
        ],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "pencil"
        ],
        "defaultCode": 59656,
        "grid": 0
      },
      "properties": {
        "id": 9,
        "order": 84,
        "ligatures": "write, pencil",
        "prevSize": 32,
        "code": 59656,
        "name": "pencil"
      },
      "setIdx": 0,
      "setId": 3,
      "iconIdx": 8
    },
    // ...
  ],
  "height": 1024,
  "metadata": {
    "name": "icomoon"
  },
  "preferences": {
   // ...
  }
}

In the meantime I tried to load another set of icons, without imported custom icons like the above, and everything works fine.

[aykutkardas]

Thanks @Simoneth. You can use react-icomoon@2.5.1 version. Problem solved.