Angular library build error "Cannot read properties of null (reading 'render')"

[JMRCGuedes]

Rollup Version

2.74.0 (latest)

Operating System (or Browser)

Windows 10

Node Version (if applicable)

16.15.0

Link To Reproduction

not applicable

Expected Behaviour

Passing the ng build

Actual Behaviour

Error:
Running ng build on angular library gives the following error
Cannot read properties of null (reading 'render')

Disclaimer:
Being this an enterprise project I can´t provide more information but I think that the problem is related to the changes made by using the optional chaining operator

Workaround:

By adding the following in the package.json devDependencies, it works fine:

"rollup": "2.72.1",
"@rollup/plugin-json": "4.1.0",
"@rollup/plugin-node-resolve": "13.3.0"

[digaus]

@lukastaegert

Same issues. Not only that but compilation now produces different and wrong results when not using optional chaining!

This is a major issue for us and might break other libs and applications because it is not noticed while compiling. It completely drops use cases and passes void 0 to functions instead of the actual data...

Adding "rollup": "2.73.0" to the package.json fixes this for now...

Source Code:

  public updateLookupById(lookupName: string, id: any, updateLookup?: boolean): Promise<any> {
        const lookup: LookupBean = this.lookupMap.get(lookupName);
        return new Promise<any>((resolve: any): any => {
            if (lookup) {
                if (!!this.blocked.get(lookup.url + '/' + id)) {
                    this.blocked.get(lookup.url + '/' + id).subscribe((dataHolder: any) => {
                        let result: any;
                        if (lookup.withDataHolder) {
                            result = dataHolder.data[ 0 ];
                        } else {
                            result = dataHolder;
                        }
                        if (updateLookup) {
                            this.updateLookupWithObject(lookupName, result);
                        }
                        resolve(result);
                    }, () => resolve(null));
                } else {
                    const sub: any = this.myHttpClientService.get(lookup.url + '/' + id, null, true).pipe(share());
                    this.blocked.set(this.lookupMap.get(lookupName).url + '/' + id, sub);
                    sub.subscribe((dataHolder: any) => {
                        let result: any;
                        if (lookup.withDataHolder) {
                            result = dataHolder.data[ 0 ];
                        } else {
                            result = dataHolder;
                        }
                        if (updateLookup) {
                            this.updateLookupWithObject(lookupName, result);
                        }
                        this.blocked.delete(lookup.url + '/' + id);
                        resolve(result);
                    }, () => resolve(null));
                }
            } else {
                console.warn('Lookup mit dem lookupNamen "' + lookupName + '" konnte nicht gefunden werden');
                console.warn('Geladene Lookups: ' + Array.from(this.lookupMap.keys()).toString());
                resolve(null);
            }
        });
    }

Previous compilation:

               updateLookupById(pe, st, Ot) {
                    const Kt = this.lookupMap.get(pe);
                    return new Promise(fn=>{
                        if (Kt)
                            if (this.blocked.get(Kt.url + "/" + st))
                                this.blocked.get(Kt.url + "/" + st).subscribe(Pn=>{
                                    let $n;
                                    $n = Kt.withDataHolder ? Pn.data[0] : Pn,
                                    Ot && this.updateLookupWithObject(pe, $n),
                                    fn($n)
                                }
                                , ()=>fn(null));
                            else {
                                const Pn = this.myHttpClientService.get(Kt.url + "/" + st, null, !0).pipe((0,
                                ve.B)());
                                this.blocked.set(this.lookupMap.get(pe).url + "/" + st, Pn),
                                Pn.subscribe($n=>{
                                    let Qn;
                                    Qn = Kt.withDataHolder ? $n.data[0] : $n,
                                    Ot && this.updateLookupWithObject(pe, Qn),
                                    this.blocked.delete(Kt.url + "/" + st),
                                    fn(Qn)
                                }
                                , ()=>fn(null))
                            }
                        else
                            console.warn('Lookup mit dem lookupNamen "' + pe + '" konnte nicht gefunden werden'),
                            console.warn("Geladene Lookups: " + Array.from(this.lookupMap.keys()).toString()),
                            fn(null)
                    }
                    )
                }

Current compilation:

                updateLookupById(pe, st, Ot) {
                    const Kt = this.lookupMap.get(pe);
                    return new Promise(fn=>{
                        if (Kt)
                            if (this.blocked.get(Kt.url + "/" + st))
                                this.blocked.get(Kt.url + "/" + st).subscribe(Pn=>{
                                    Ot && this.updateLookupWithObject(pe, void 0),
                                    fn(void 0)
                                }
                                , ()=>fn(null));
                            else {
                                const Pn = this.myHttpClientService.get(Kt.url + "/" + st, null, !0).pipe((0,
                                ve.B)());
                                this.blocked.set(this.lookupMap.get(pe).url + "/" + st, Pn),
                                Pn.subscribe(qn=>{
                                    Ot && this.updateLookupWithObject(pe, void 0),
                                    this.blocked.delete(Kt.url + "/" + st),
                                    fn(void 0)
                                }
                                , ()=>fn(null))
                            }
                        else
                            console.warn('Lookup mit dem lookupNamen "' + pe + '" konnte nicht gefunden werden'),
                            console.warn("Geladene Lookups: " + Array.from(this.lookupMap.keys()).toString()),
                            fn(null)
                    }
                    )
                }

[lukastaegert]

Rollup does not inject void 0. Can you give the result without a minifier that completely scrambles the code? Or create some kind of reproduction that I can work with?

[lukastaegert]

And for the initial error which seems completely unrelated to the second one (maybe it should be a separate issue?): If you cannot give a reproduction, is there a way to print the stack trace of the error? It would seem very odd to me that optional chaining would cause an error Cannot read properties of null, but maybe the ? is missing in another place?

[lukastaegert]

In any case, I feel with you, but I need reproductions, not code snippets.

[digaus]

Rollup does not inject void 0. Can you give the result without a minifier that completely scrambles the code? Or create some kind of reproduction that I can work with?

Here you can see that result is never assigned, will see if I can make some small reproduction repo

  updateLookupById(lookupName, id, updateLookup) {
        const lookup = this.lookupMap.get(lookupName);
        return new Promise((resolve) => {
            if (lookup) {
                if (!!this.blocked.get(lookup.url + '/' + id)) {
                    this.blocked.get(lookup.url + '/' + id).subscribe((dataHolder) => {
                        let result;
                        if (updateLookup) {
                            this.updateLookupWithObject(lookupName, result);
                        }
                        resolve(result);
                    }, () => resolve(null));
                }
                else {
                    const sub = this.myHttpClientService.get(lookup.url + '/' + id, null, true).pipe(share());
                    this.blocked.set(this.lookupMap.get(lookupName).url + '/' + id, sub);
                    sub.subscribe((dataHolder) => {
                        let result;
                        if (updateLookup) {
                            this.updateLookupWithObject(lookupName, result);
                        }
                        this.blocked.delete(lookup.url + '/' + id);
                        resolve(result);
                    }, () => resolve(null));
                }
            }
            else {
                console.warn('Lookup mit dem lookupNamen "' + lookupName + '" konnte nicht gefunden werden');
                console.warn('Geladene Lookups: ' + Array.from(this.lookupMap.keys()).toString());
                resolve(null);
            }
        });
    }

[digaus]

#4504

Made seperate issue and added reproduction repo

[JMRCGuedes]

related to
#4506
Fixed in 2.74.1

[lukastaegert]

I created a new PR #4510 that reimplements parameter tree-shaking in a more conservative way. Could you verify that this PR works for you via npm install rollup/rollup#parameter-defaults?