Ionic-framework: bug: Setting [mode]=" 'not ios or md' " causes './undefined.entry.js' Error

[lincolnthree]

Bug Report

Ionic version:


[x] 5.0.0-beta.1

Current behavior:

Set an invalid value for any [mode] flag. The following error occurs.

````
core-9d3f3c18.js:63 Error: Cannot find module './undefined.entry.js'
at .*.entry.js$ include: .entry.js$ exclude: .system.entry.js$ namespace object:385
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:855
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
consoleError @ core-9d3f3c18.js:63
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ tab1-tab1-module.js:13

zone-evergreen.js:651 Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (core-9d3f3c18.js:1737) TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (http://localhost:8101/vendor.js:105947:24)
````

Expected behavior:

An error should be displayed that tells the user where to find the issue in question. Right now it is virtually impossible to track this down unless you know what you are doing. I only found it by deleting code until the error went away, then adding it back, and so on, until I was able to pinpoint the problem.

Steps to reproduce:

1. ionic start myApp tabs
2. Edit tab1.page.html and add mode=foo to any ion-item component.
3. Reload page.. kapow.

Related code:

      <ion-item href="https://ionicframework.com/docs/" mode=foo>
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.10 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0-beta.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.0 (/usr/local/lib/node_modules/node/bin/node)
   npm    : 6.13.1
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. As per the docs there are only two valid modes: "ios" and "md". Any other values would be considered invalid (See: https://ionicframework.com/docs/theming/platform-styles#ionic-modes). We will look into adding a more helpful error message to aid debugging.

[lincolnthree]

Yep. These are the little typo/random issues that add up to cause developer fatigue.

Submitted both as a reference to other folks who happen upon the same issue, and also so it can hopefully be addressed to avoid the confusion/stack/error searching entirely for future users. Thanks for taking a look / considering.

[brandyscarney]

@lincolnthree Thanks for the feedback! So each component has the mode defined as a property and it has a type which says which values it can accept:

(The above SS taken from https://ionicframework.com/docs/api/datetime#properties)

I'm just pointing this out in case it is helpful if you're ever looking for what values another property accepts. I'll bring this up with the team to see how we can catch this error though.

[lincolnthree]

@brandyscarney Yes, thanks for mentioning that. I forgot to specify that here, but I did point it out in the other thread where folks were discussing this issue: https://github.com/ionic-team/ionic/issues/19394

This issue is more about developer experience. Even if one understands the mode flags available, if there were to type 'mb' instead of 'md'; by accident, just for example, they could spend a day tracking down what went wrong if not caught early, and 'clever' debugging techniques not used.

If I recall correctly, the page the error occurs on only appears when zone-debug is enabled. If zone-debug is not enabled, it's just a random error from Zone.js and there's no way to pinpoint the file where the error occurred.

It's a useful practice when developing APIs (not to preach too much, sorry, i've got opinions about API design -- as it's my area of focus) to be explicit with error messages when situations like this occur. Yes it may be the user's fault, but it's our job to make sure they can figure out how and why it's their fault. Etc etc, I'll stop preaching now. Y'all do a great job with this in general. If you didn't, I wouldn't even bother submitting this issue :) This is actually outside the norm for other mis-configuration issues with Ionic components.

It's also possibly worth noting that this only became a fatal error when I upgraded to 5.0.0-beta*. So it was pretty hard to track down since the platform misconfiguration actually occurred... months ago.

[netsesame2]

Just meet the same issue, a custmized component with a mode attribute defined.
Throw exception in ionic 5, before reading this post, have no idea at all.

Thanks.

[jakobe]

Seeing the same issue as @netsesame2 with our own custom components having a mode attribute/input property used inside an Ionic component. For Angular a workaround is to use template property binding: <my-custom-component [mode]="'whatever'">
But it seems Ionic is missing a check somewhere whether the mode attribute being set on an Ionic component or not? 🤔

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20828 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.