Uncaught ReferenceError: NativeClass is not defined
kajic opened this issue · 7 comments
Which platform(s) does your issue occur on?
- iOS
- emulator (iPhone SE, 2nd Gen) and physical device (iPhone 13 Pro Max).
Please, provide the following version numbers that your issue occurs with:
- CLI: 8.1.5
- Runtime(s):
"@nativescript/android": "8.1.1",
"@nativescript/ios": "8.1.0",
- Cross-platform modules: 8.1.5
"dependencies": {
"@klippa/nativescript-login": "^3.0.1",
"@nativescript-community/push": "^1.1.9",
"@nativescript-community/ui-lottie": "^1.0.0",
"@nativescript-community/ui-material-tabs": "^5.2.31",
"@nativescript/appversion": "^2.0.0",
"@nativescript/core": "^8.1.5",
"@nativescript/firebase": "^11.1.3",
"@nativescript/iqkeyboardmanager": "^2.0.0",
"@nativescript/localize": "^5.0.2",
"@nativescript/social-share": "^2.0.4",
"@nativescript/theme": "~3.0.1",
"@nota/nativescript-webview-ext": "^8.0.0",
"@nstudio/nativescript-pulltorefresh": "^3.0.1",
"classnames": "^2.2.6",
"nativescript-intl": "^4.0.2",
"nativescript-sentry": "^2.0.1",
"nativescript-sound-kak": "https://github.com/kajic/nativescript-sound.git",
"nativescript-taptic-engine": "^2.1.0",
"nativescript-vibrate": "^4.0.1",
"nativescript-vue": "~2.9.0",
"rxjs": "^7.0.0",
"vuex": "^3.6.0",
"vuex-persistedstate": "^4.0.0-beta.3"
},
"devDependencies": {
"@nativescript/android": "8.1.1",
"@nativescript/ios": "8.1.0",
"@nativescript/types": "~8.1.0",
"@nativescript/webpack": "^5.0.0-beta.9",
"@sentry/webpack-plugin": "^1.14.0",
"@types/node": "~14.6.2",
"dotenv": "^8.2.0",
"nativescript-vue-template-compiler": "~2.8.0",
"sass": "~1.39.0",
"typescript": "~4.3.5",
"vue": "~2.6.12"
},
Please, tell us how to recreate the issue in as much detail as possible.
After running tns clean and tns run ios --device 1 --no-hmr, on an emulator or a physical device, I get the following error once the application is launched on the device:
2021-12-20 13:28:34.941685-0800 roninativescript[2999:772397] NativeScript encountered a fatal error: Uncaught ReferenceError: NativeClass is not defined
at
./node_modules/@klippa/nativescript-login/login.ios.js(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/vendor.js:145:1)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/splash/SigninSection.vue?vue&type=script&lang=js&(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:13735:84)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/components/splash/SigninSection.vue?vue&type=script&lang=js&(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:20246:240)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/components/splash/SigninSection.vue(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:18586:101)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./node_modules/ts-loader/index.js??clonedRuleSet-2[0].rules[0].use[0]!./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/splash/SplashPage.vue?vue&type=script&lang=ts&(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:16999:76)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/components/splash/SplashPage.vue?vue&type=script&lang=ts&(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:20534:301)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/components/splash/SplashPage.vue(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:18624:98)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/store.ts(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:15639:91)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/classes/dynamiclink.js(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:2286:64)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at ./app/app.ts(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:15:78)
at __webpack_require__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:23:42)
at __webpack_exec__(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:27886:39)
at (file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:27887:221)
at __webpack_require__.X(file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/runtime.js:114:21)
at (file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:27887:47)
at (file:///var/containers/Bundle/Application/B01BABDA-B060-4A47-B717-81339403CA47/roninativescript.app/app/bundle.js:27892:3)
at require(:1:137)
I can see in my node_modules that the ./node_modules/@nativescript/webpack/dist/transformers/NativeClass directory is actually present.
It seems like using 2.1.0 solves the issue, but it's unclear to me whether that causes any issues with NativeScript 8?
I think I also had this issue before. You should probably try to update @nativescript/webpack to the latest version.
NativeClass should actually run during compilation, not during runtime, so getting this error during runtime should never happen and indicates some issue with the Webpack/compilation setup. It has to do with webpack 5.
To be a bit more specific, the NativeClass has been moved between the webpack versions, that move happened somewhere between the beta/rc versions of @nativescript/webpack. And we had to change our tsconfig.json for it:
Transformer in our NS 8 version:
@nativescript/webpack/dist/transformers/NativeClass
Transformer in our NS 7 version:
@nativescript/webpack/transformers/ns-transform-native-classes
If you go to the latest version of @nativescript/webpack, I'm quite sure it will work.
Hm, I just tried the following changes (in addition to what I specified above):
- "@klippa/nativescript-login": "^2.1.0",
+ "@klippa/nativescript-login": "^3.1.0",
...
- "@nativescript/webpack": "^5.0.0-beta.9",
- "@sentry/webpack-plugin": "^1.14.0",
+ "@nativescript/webpack": "^5.0.2",
+ "@sentry/webpack-plugin": "^1.18.3",
Upgraded that sentry plugin for good measure.
Anyway, unfortunately I'm still seeing the same exception. Here's another instance of it (the one above comes from XCode):
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught ReferenceError: NativeClass is not defined
at
./node_modules/@klippa/nativescript-login/login.ios.js(file: app/webpack:/Roni/node_modules/@klippa/nativescript-login/login.ios.js:13:0)
at __webpack_require__(file: app/webpack:/Roni/webpack/bootstrap:19:0)
at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/splash/SigninSection.vue?vue&type=script&lang=js&(file:///app/bundle.js:13772:84)
at __webpack_require__(file: app/webpack:/Roni/webpack/bootstrap:19:0)
at ./app/components/splash/SigninSection.vue?vue&type=script&lang=js&(file:///app/bundle.js:20229:240)
at __webpack_require__(file: app/webpack:/Roni/webpack/bootstrap:19:0)
at ./app/components/splash/SigninSection.vue(file:///app/bundle.js:18569:101)
at __webpack_require__(file: app/webpack:/Roni/webpack/bootstrap:19:0)
Yes, you are right. I have just checked the actual code that was published to NPM, and that one contains NativeClass, while this should have been replaced during compile-time. Something has broken in the build-process. I will soon publish a new NS8 version to fix this.
@kajic I have just published 3.1.1 and confirmed that NativeClass is transformed in this release :)
Thank you very much!