Uncaught Error: Unexpected call: has underlying svelte-native code changed?
zeddrix opened this issue · 10 comments
Hey @uzarsalan, I'm getting this error:
CONSOLE INFO: HMR: Hot Module Replacement Enabled. Waiting for signal.
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: Unexpected call: has underlying svelte-native code changed?
at
originalNativeView.on(file: node_modules/svelte-hmr/runtime/svelte-native/proxy-adapter-native.js:142:0)
at setWindowContent(file: node_modules/@nativescript/core/application/index.ios.js:265:0)
at notifyAppStarted(file: node_modules/@nativescript/core/application/index.ios.js:165:0)
at didFinishLaunchingWithOptions(file: node_modules/@nativescript/core/application/index.ios.js:149:0)
at push.../node_modules/@nativescript/core/application/index.js.NotificationObserver.onReceive(file: node_modules/@nativescript/core/application/index.ios.js:39:0)
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: Unexpected call: has underlying svelte-native code changed?
at
originalNativeView.on(file: node_modules/svelte-hmr/runtime/svelte-native/proxy-adapter-native.js:142:0)
at setWindowContent(file: node_modules/@nativescript/core/application/index.ios.js:265:0)
at notifyAppStarted(file: node_modules/@nativescript/core/application/index.ios.js:165:0)
at didFinishLaunchingWithOptions(file: node_modules/@nativescript/core/application/index.ios.js:149:0)
at push.../node_modules/@nativescript/core/application/index.js.NotificationObserver.onReceive(file: node_modules/@nativescript/core/application/index.ios.js:39:0)
', reason: '(null)'
*** First throw call stack:
(
0 CoreFoundation 0x00007fff203fbbb4 __exceptionPreprocess + 242
1 libobjc.A.dylib 0x00007fff2019ebe7 objc_exception_throw + 48
2 NativeScript 0x0000000108d163ee _ZN3tns21NativeScriptException15OnUncaughtErrorEN2v85LocalINS1_7MessageEEENS2_INS1_5ValueEEE + 880
3 NativeScript 0x00000001090fe0f4 _ZN2v88internal14MessageHandler25ReportMessageNoException<…>
I've copied everything I need to copy from the demo app you linked to have the sidedrawer, except for the rollup.config.js because I'm not sure how to. I'm also not applying this to Header component yet like shown in the demo but I'm getting this error already. I'm using a template from here by the way: https://svelte-native.technology/blog/svelte-native-quick-start
Thanks.
Here's my App.svelte:
<script>
import { onMount } from 'svelte';
import * as nav from './Nav';
import LandingView from './LandingView.svelte';
import HomeView from './views/HomeView/HomeView.svelte';
import LogInView from './views/LogInView.svelte';
import SignUpView from './views/SignUpView.svelte';
const gotoPage = (page) => {
drawer.closeDrawer();
nav.goto(page);
};
let drawer;
let current_page = nav.current_page;
onMount(() => {
nav.init('navframe', drawer, LandingView);
});
</script>
<radSideDrawer bind:this={drawer}>
<radSideDrawer.drawerContent>
<gridLayout rows="auto, *">
<label row="0" padding="10" class="h2" horizontalAlignment="left">Examples</label>
<label
row="0"
class="fas h2"
text=""
padding="10"
horizontalAlignment="right"
on:tap={() => drawer.closeDrawer()}
/>
<scrollView row="1">
<stackLayout>
<label
text="Home"
class:current={$current_page == HomeView}
padding="10"
on:tap={() => gotoPage(HomeView)}
/>
<label
text="Log In"
class:current={$current_page == LogInView}
padding="10"
on:tap={() => gotoPage(LogInView)}
/>
<label
text="Sign Up"
class:current={$current_page == SignUpView}
padding="10"
on:tap={() => gotoPage(SignUpView)}
/>
</stackLayout>
</scrollView>
</gridLayout>
</radSideDrawer.drawerContent>
<radSideDrawer.mainContent>
<frame id="navframe" defaultPage={HomeView} />
</radSideDrawer.mainContent>
</radSideDrawer>
<style>
.current {
font-weight: bold;
}
</style>
Here's my Nav.ts:
import { navigate } from 'svelte-native'
import { writable } from 'svelte/store'
import RadSideDrawerElement from 'svelte-native-nativescript-ui/sidedrawer';
export let current_page = writable(null);
let nav_frame;
let drawer: RadSideDrawerElement;
export function init(navFrame, navDrawer: RadSideDrawerElement, startPage) {
nav_frame = navFrame;
drawer = navDrawer;
current_page.set(startPage)
}
export function goto(view, props) {
current_page.set(view);
navigate({
page: view,
props: props,
clearHistory: true,
frame: nav_frame
});
}
export function toggleDrawer() {
drawer.toggleDrawerState();
}
Here's my app.ts:
/*
In NativeScript, the app.ts file is the entry point to your application.
You can use this file to perform app-level initialization, but the primary
purpose of the file is to pass control to the app’s first module.
*/
import RadSideDrawerElement from 'svelte-native-nativescript-ui/sidedrawer';
RadSideDrawerElement.register();
import { svelteNative, svelteNativeNoFrame } from 'svelte-native';
// From this one...
// import App from './LandingView.svelte';
// svelteNative(App, {});
// ...to this one:
import App from './App.svelte';
svelteNativeNoFrame(App, {});
And here's the sidedrawer.ts:
import { registerElement } from 'svelte-native/dom'
import { NativeViewElementNode } from "svelte-native/dom";
import { RadSideDrawer } from 'nativescript-ui-sidedrawer';
export default class RadSideDrawerElement extends NativeViewElementNode<RadSideDrawer> {
constructor() {
super('radSideDrawer', RadSideDrawer);
}
private get _drawer() {
return this.nativeView as RadSideDrawer;
}
closeDrawer() {
this._drawer.closeDrawer();
}
getIsOpen(): boolean {
return this._drawer.getIsOpen();
}
showDrawer() {
this._drawer.showDrawer();
}
toggleDrawerState() {
this._drawer.toggleDrawerState();
}
static register() {
registerElement('radSideDrawer', () => new RadSideDrawerElement());
}
}
I see. Don't you think the problem lies with svelte-native since this happened at least twice—to @nergmada and to me? I suppose this also happened to other developers, too. Moreover, I don't know what causes this, too. I'm new to Svelte Native and NativeScript but am trying my best to learn it. Since we just copied the code to apply this sidedrawer from the demo, could you please reconsider checking whether there's something wrong with the demo's code? Besides, the demo isn't running even after doing the solution that closed this issue.
I'm getting the same error right out of the box on a clean install of the blank Svelte template. Just thought I'd add that
Had the same issue spinning up the blank Svelte template. Looks like something's weird with svelte-hmr.
I got it to run successfully by adding the flag --no-hmr when running ns run ios
Example: ns run ios --no-hmr
With any luck, the fix is pending for the bug happening around here: https://github.com/rixo/svelte-hmr/blob/master/runtime/svelte-native/proxy-adapter-native.js#L126
Just realized hmr is crucial for hot reloading (duh).
My temporary fix was commenting out this line: https://github.com/rixo/svelte-hmr/blob/master/runtime/svelte-native/proxy-adapter-native.js#L167
Then I ran ns run ios as normal.
Now, this will make hot-reloading sub-optimal, but it's better than nothing.
I also use the default template, unable to get it to work, it crashes out of the gate. The comment out solution by @pixelsaurus does not work for me. Will develop on Android for now, no idea how to proceed.
Having the same issue on a fresh install (ns version 8.1.5), the issue seems coming from the condition
if (type === 'navigatedFrom') {
in node_modules/svelte-hmr/runtime/svelte-native/proxy-adapter-native.js:132
With some debug, it seems like the value received in type is = traitCollectionColorAppearanceChanged.
As the condition returns false, it fells in the exception in proxy-adapter-native.js#L140
My temporary solution is to comment the else bloc:
// throw new Error(
// 'Unexpected call: has underlying svelte-native code changed?'
// )
I have no idea how to deal with the type traitCollectionColorAppearanceChanged.
Can someone help solving this or give some guidance for a good solution ?
Thanks!
@ibousfiha Thanks for digging into this and giving me a hint to the root cause. This seems to be a bug in in svelte-hmr's proxy adapter native. The code in question is just trying to replace svelte-natives page destroy handler, it assumes that the first/only event the component listens for is 'navigatedFrom' and doesn't know what to do if it gets a call for a different one. The nativescript page on ios is setup to listen to color appearance change (https://github.com/NativeScript/NativeScript/blob/0d4ccba60aae9a340fcee28bc0880dead353c799/packages/core/application/index.ios.ts#L332)
I will submit a PR to svelte-hmr.
svelte-hmr has pushed a new release that should fix this.
Thanks @halfnelson !