NativeScript encountered a fatal error: Uncaught ReferenceError: __metadata is not defined

[terranc-gich]

I have just migrated my project from NativeScript 6.5 to NativeScript 7.0. After fixing the import statements, the project is built successfully. However, when it runs (in emulator or hardware), the following error is encountered:

Webpack compilation complete. Watching for file changes.
Webpack build done!
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
Installing on device 9DDC5F09-DF5B-4D33-9F96-C77B8A32A58B...
Successfully installed on device with identifier '9DDC5F09-DF5B-4D33-9F96-C77B8A32A58B'.
Successfully transferred all files on device 9DDC5F09-DF5B-4D33-9F96-C77B8A32A58B.
Restarting application on device 9DDC5F09-DF5B-4D33-9F96-C77B8A32A58B...
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught ReferenceError: __metadata is not defined
at
../node_modules/@nativescript/core/ui/styling/css-selector/index.js(file: node_modules/@nativescript/core/ui/styling/css-selector/index.js:82:0)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at (file: node_modules/@nativescript/core/ui/styling/style-scope.js:1:0)
at ../node_modules/@nativescript/core/ui/styling/style-scope.js(file:///app/vendor.js:39517:30)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/core/view-base/index.js(file: node_modules/@nativescript/core/ui/core/view-base/index.js:1:0)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/core/view/view-common.js(file: node_modules/@nativescript/core/ui/core/view/view-common.js:1:0)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/core/view/index.js(file: node_modules/@nativescript/core/ui/core/view/index.ios.js:1:0)
at webpack_require<…>
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught ReferenceError: __metadata is not defined
at
../node_modules/@nativescript/core/ui/styling/css-selector/index.js(file: node_modules/@nativescript/core/ui/styling/css-selector/index.js:82:0)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at (file: node_modules/@nativescript/core/ui/styling/style-scope.js:1:0)
at ../node_modules/@nativescript/core/ui/styling/style-scope.js(file:///app/vendor.js:39517:30)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/core/view-base/index.js(file: node_modules/@nativescript/core/ui/core/view-base/index.js:1:0)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/core/view/view-common.js(file: node_modules/@nativescript/core/ui/core/view/view-common.js:1:0)
at webpack_require(file: app/webpack/bootstrap:816:0)
at fn(file: app/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/core/view/index.js(file:///<…>

My environment / configuration:

• OS: macOS 10.15.4
• Xcode: 11.5
• CLI: 7.0.8
• Cross-platform modules: 7.0.3
• Android Runtime: 7.0.0
• iOS Runtime: 7.0.0
• Plugin(s):

@nativescript/core ~7.0.0
datejs ^1.0.0-rc3
nativescript-awesome-webview-with-custom-menu-items ^40.1.1
nativescript-barcodescanner ^3.1.3
nativescript-clipboard ^1.2.0
nativescript-download-progress file:nativescript-download-progress-1.0.3.tar
nativescript-email ^1.5.2
nativescript-ios-uuid ^1.0.0
nativescript-md5 ^1.0.1
nativescript-pdf-view ^2.0.1
nativescript-permissions ^1.2.3
nativescript-phone ^1.3.1
nativescript-share-file file:nativescript-share-file-1.0.6.tgz
nativescript-theme-core ~1.0.4
nativescript-toast ^2.0.0
tslib ^1.2.0

Dev Dependencies:
@nativescript/android 7.0.0
@nativescript/ios 7.0.0
@nativescript/types 7.0.0
@nativescript/webpack ~3.0.0
babel-traverse ^6.26.0
babel-types ^6.26.0
babylon 6.4.5
lazy 1.0.11
typescript 3.9.7

[terranc-gich]

I added the following line:

import { __metadata, __decorate } from '../../../../../tslib/tslib';

to node_modules/@nativescript/core/ui/styling/css-selector/index.js

The app can now launch successfully.

[farfromrefug]

@terranc-gich this is fixed in N. Make sure everything is up to date (cli, core, webpack)

[terranc-gich]

I have already run ns update. It is reported that my project is up to date.

The cli / core was installed yesterday.
nativescript/core --> 7.0.3
nativescript/webpack --> 3.0.4
nativescript-cli --> 7.0.8

It still cannot run without the patch to index.js

[terranc-gich]

I have tried to remove node_modules and rebuild the project again. Same problem.

[farfromrefug]

@terranc-gich juste tested and looked at the code. I can confirm the fix is already there (webpack comp ) but not released:
#8838

[NathanWalker]

@farfromrefug bd00e1f
was released with 7.0.3 of core. Here's confirmation from a project which uses core 7.0.3 from npm:

[NathanWalker]

@terranc-gich if you could confirm your project after cleaning pulled down 7.0.3 would be great to know. From above seems you're using @nativescript/core ~7.0.0 so should pull down the patch but perhaps you hadn't cleaned prior to that patch release. Let us know, if you still encounter issue then bd00e1f is not a fix for this and something else is needed.

[farfromrefug]

@NathanWalker i can confirm it does not fix it! Had it in multiple projects

[terranc-gich]

@NathanWalker I have already tried ns clean and then ns run ios again but the problem is still here.

[terranc-gich]

@NathanWalker My globals/index.js looks the same as yours.

[NathanWalker]

Is there a project that can be shared that exhibits this issue? Would love to run it.

[NathanWalker]

Honestly at first pass looking at the package.json posted you're using ton of non {N} 7 compat plugins ( can always check this: https://nativescript.org/blog/nativescript-7-compatible-plugins/) so best guess is this would be related to a non {N} 7 plugin but def would like to run a project that leads to this.

[farfromrefug]

@NathanWalker all my demo plugins for my comps are broken because of that. Please read my issue / PR. I explained it all there. Simply importing View first in your app.ts/js will break it.
It is an es2017 N issue. Simply look at the geneerated bundle.js to see it!

[NathanWalker]

@farfromrefug This is expected behavior actually. Here's the fix for your demo's nativescript-community/gesturehandler#7 (note that plugin did not have ts-patch installed or applied properly so that PR fixes that as well as including the dep bump needed to make ui-collection-view not crash ios.)

nativescript-vue, react-nativescript, @nativescript/angular, and core vanilla itself should always be first import and you can always override, wire into any api's after the first import which properly sets up the globals and polyfills. The important thing is to do your overrides and customizations to core api's after the first import and before the app is booted via run or other flavor bootstraps. This is expected and intentional since core must apply certain globals and polyfills first which can then be overridden or customized as needed.

@terranc-gich could you share your apps' main.ts and/or app.ts and/or app.js depending on which file your app has which contains your bootstrap code?

[farfromrefug]

@NathanWalker it is not intended ? If you look at the bundle loader it intends to add the require first, which is one the points of the bundle loader!. But because of webpack it ends up last. It should always be first to ensure tslib is loaded!
Nothing intended there...
You can't expect people to ensure the order of their import. And I already see case where I would break it anyway(like mixins needed before n-vue loads)
Their is a deep and important issue here. Please fix it...

[terranc-gich]

@NathanWalker I have just reduced my project to minimal yet still exhibits the behavior.

GM3-S3.zip

[terranc-gich]

I found that the issue is caused by the first line in the app.ts file:

import "./bundle-config";

This line seems being added by tns migrate when I previously upgraded to NativeScript 6.5.

The issue can be fixed by removing this line.

[NathanWalker]

Fix published with 7.0.6
https://github.com/NativeScript/NativeScript/releases/tag/7.0.6-core

[terranc-gich]

@NathanWalker I've tested the fix and it resolved my issue. Thanks a lot.

But is the following line (in my app.ts) still necessary in N7? or it now becomes redundant?
import "./bundle-config";

[shirakaba]

I'm hitting into this issue today when trying to add @profile into either of packages/core/data/dom-events/dom-event.ts or packages/core/data/dom-events/dom-event.ts into NativeScript Core in my DOM events PR, #10100.

This is when using all the latest stuff (NativeScript 8, latest plugin seed, etc.) on vanilla NativeScript. So nothing to do with order of userland imports, even - I can't successfully add the decorator to new files in Core.

I suspect we have lots of circular references in Core and so the order in which packages (including tslib and profiling) get imported is indeterministic and fragile. I don't have time to dig deeper, but just noting that there is an issue here. Really, we should ditch @profile altogether and fix/implement CPU profiling in the v8 runtime (as it does not work right now - all we have right now is memory snapshots).