Project does not work when switch to device in browser

I do not change any code but same code does not work when I toggle to device on chrome browser, can someone help me ?

I can not attach txt file, only a part of logs

icon.js:70 Uncaught TypeError: Cannot read property ‘split’ of undefined
at F7Icon.get classes [as classes] (icon.js:70)
at F7Icon.render (icon.js:117)
at finishClassComponent (react-dom.development.js:13085)
at updateClassComponent (react-dom.development.js:13047)
at beginWork (react-dom.development.js:13715)
at performUnitOfWork (react-dom.development.js:15741)
at workLoop (react-dom.development.js:15780)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15194)
at renderRoot (react-dom.development.js:15840)
at performWorkOnRoot (react-dom.development.js:16437)
at performWork (react-dom.development.js:16358)
at performSyncWork (react-dom.development.js:16330)
at requestWork (react-dom.development.js:16230)
at scheduleWork$1 (react-dom.development.js:16096)
at scheduleRootUpdate (react-dom.development.js:16663)
at updateContainerAtExpirationTime (react-dom.development.js:16690)
at updateContainer (react-dom.development.js:16717)
at ReactRoot…/node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17000)
at react-dom.development.js:17140
at unbatchedUpdates (react-dom.development.js:16557)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:17136)
at Object.render (react-dom.development.js:17195)
at Object…/src/index.js (index.js:18)
at webpack_require (bootstrap fb28e0d0ddc4736424ef:678)
at fn (bootstrap fb28e0d0ddc4736424ef:88)
at Object.0 (routes.js:102)
at webpack_require (bootstrap fb28e0d0ddc4736424ef:678)
at bootstrap fb28e0d0ddc4736424ef:724
at bootstrap fb28e0d0ddc4736424ef:724

Would your logic still work with:?
const parts = (mdIcon || iosIcon).split(':');

Sure both mdIcon and iosIcon are defined?

@plague69 How can I know this ?

Sure both mdIcon and iosIcon are defined?

Actualy its not my logic, I didnt code it, gives error for code in node_modules as seen in the screenshot. In App.js I see this code and I dont know what its doing

  if (document.location.search.indexOf('theme=') >= 0) {
    theme = document.location.search.split('theme=')[1].split('&')[0];
  }

console.log({'mdIcon':mdIcon,'iosIcon':iosIcon });
Check output and that the one you are trying to use is not undefined.

It’s checking the URL user typed and checking for a defined theme is my best guess from the snippet

I get this
Uncaught ReferenceError: mdIcon is not defined

So why iconset gives in mobile mode ? Actually I also tried to run in apk and see white page, probaly it gives same error that why I can not see anything on mobile

If you use dynamic icon you need to specify both ios and md icon attributes/properties for both themes!

How can I do that ? What is dynamic icon ?? You mean I need to define also ios icon whenever I use an icon ? However I did not tried on ios or mac machine.

I just used the v3 react template, where should I define it ?

Should be pretty obvious, from Icon docs:

md - Icon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon

ios - Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon

Apparently when you switch browser to mobile mode, you switch it to iOS theme, so it expecting an icon specified for ios theme, and you don’t have such

2 Likes

Vladimir I couldnt try on same computer but it did not give me error on another computer when switch to mobile mode.

I wonder why it switches directly to IOS theme as you say ? I tried on windows, and before with my f7 v2 app it was always switching to Android theme (because I see md theme icons, chechbox, searchbox etc). Is it something different with v3, why it ever switched to IOS on a windows chrome ?