UncaughtReferenceError: Cannot access 'SatPopover' before initialization

[faizu2k01]

Angular version - 9.1.13 node - 14 npm - 6 ncstate-sat/popover - 5.0.0 tsconfigu.json -

{ "compileOnSave": false, "compilerOptions": { "rootDir": "./", "baseUrl": "./", "importHelpers": true, "module": "esnext", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": false, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom"

],
"forceConsistentCasingInFileNames": false,
"strict": false,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": false,

}, "angularCompilerOptions": { "enableIvy": true, "strictInjectionParameters": false, "strictInputAccessModifiers": false, "strictTemplates": false

} }

If IvyEngine is disabled then no compilation and runtime issue. but when enabling the IvyEngine the runtime error occurs-

Project is building successfully, but throwing runtime issue with the error message in browser console "UncaughtReferenceError: Cannot access 'SatPopover' before initialization" along with this the error also provides the path of ncstate/sat-popover.js file in node_module.

I looked for following git open/closed issues related to the error - 1-https://github.com/angular/angular-cli/issues/15077 2-https://github.com/angular/angular-cli/issues/15077 , if they are affecting but they were not impacting it .

The impact was it self in node_modules\@ncstate\sat-popover__ivy_ngcc__\fesm2015\ncstate-sat-popover.js . I found the use of SatPopover in ncstate-sat-popover.js file before initialization.

The error I'm facing.

After manual change in the node_module file the error gone.

I can't do it manually when the project is build, So should I consider that this package is not compatible with IvyEngine of version 5.0.0, if not then which one is compatible for angular 9 with IvyEngine enabled.

[wjaspers]

There's a lot to unpack here.

First, Angular 9 should be upgraded as far as you can reasonably go. Ivy was experimental at that time, and if memory serves, became the default in Angular 13.

Second, the @ncstate/sat-popover package at version 5, should also be upgraded. From what I can see at that version, the angular peerDependencies were set to version ^9.0.4.

Third, NPM prior to version 7 did not correctly enforce peerDependencies resolutions so you technically should have a mismatched version of Angular and SatPopover. Inspect the package-lock.json or yarn.lock to see what versions you actually have on disk. (Hint npm ls @angular/build-angular should tell you all the build-angular dependencies in use).

See https://dev.to/writech/how-to-fix-the-npm-conflicting-peer-dependency-error-3fag

Given the cybersecurity climate, it is vital for most applications to stay on a current release, or at the very least, a long term support version. Fortunately a majority of Angular's security concerns only affect build/dev dependencies.

I strongly urge you to upgrade your Node version if at all possible, which will give you a newer version of NPM.

See https://nodejs.org/en/about/previous-releases

After that, consider upgrading your angular dependencies. (Hint: Install npm-check-updates globally and run ncu -u @angular/*)

It will be vital to look through Angular's upgrade steps to make sure your project is compatible with major changes. You may have to make thoughtful and cautious upgrades (ie. one version at a time) to avoid being overwhelmed with compilation and configuration errors.

I have occasionally transposed new angular project output onto old repositories to ensure I am getting everything necessary to move ahead.

See https://angular.dev/update-guide?v=9.0-13.0&l=1

[wjaspers]

And yes, the issues you found in the Angular repo are the underlying cause.

And I was incorrect; Ivy support was official in Angular 12, not 13.

If you can't move up from Angular 9, you should be able to fork this repository, checkout to the commit below and modify the tsconfig/code as needed.

Then, you could publish your own version on NPM or a private artifactory/etc service.

https://github.com/ncstate-sat/popover/commit/01c6130e2330555480612655d46a6365fb5f5a6e