Ngx-datatable: Module causes errors in prerendered application

Created on 4 May 2018 · 5Comments · Source: swimlane/ngx-datatable

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
When importing the module in an application that uses prerendering, loading the application will fail, even if the ngx-datatable component is not used anywhere, but merely imported.

Expected behavior
Any page should be able to prerender, regardless of whether the ngx-datatable component is on it or not. It's ok for the ngx-datatable component itself to just prerender to an empty element.

Reproduction of the problem

Setup a dotnetcore application with ASP.NET Core 2.0 & Angular 5+
npm install ngx-datatable
Import NgxDatatableModule in app.module.ts
Try to start the application

What is the motivation / use case for changing the behavior?
ngx-datatable is currently unusable in an application that uses prerendering, not even for the parts that are not prerendered. This can be easily fixed by checking the window variable before using it:

export const MouseEvent = ((window as any) || (global as any)).MouseEvent as MouseEvent;
export const KeyboardEvent = ((window as any) || (global as any)).KeyboardEvent as KeyboardEvent;
export const Event = ((window as any) || (global as any)).Event as Event;

This should become something like:

export const MouseEvent = (((typeof window !== 'undefined' && window) as any) || (global as any)).MouseEvent as MouseEvent;
export const KeyboardEvent = (((typeof window !== 'undefined' && window) as any) || (global as any)).KeyboardEvent as KeyboardEvent;
export const Event = (((typeof window !== 'undefined' && window) as any) || (global as any)).Event as Event;

Please tell us about your environment:
Windows 10, Visual Studio 2017 Community Edition, dotnetcore 2.0

Table version: 11.3.2
Angular version: 5.0.0
Browser: platformBrowser (server side)
Language: TypeScript 2.6

Source

GrimaceOfDespair

👍1

Most helpful comment

For now, I'm working around this with webpack. Ugly, but it does the job. Note that I use 3 identical replacements to replace the three occurrences.

    module: {
        rules: [
            {
                test: /\.(ts|js)$/, use: {
                    loader: 'string-replace-loader', options: {
                        multiple: [{
                            search: '(window || global)',
                            replace: '((typeof window !== \'undefined\' && window) || global)'
                        }, {
                            search: '(window || global)',
                            replace: '((typeof window !== \'undefined\' && window) || global)'
                        }, {
                            search: '(window || global)',
                            replace: '((typeof window !== \'undefined\' && window) || global)'
                        }]
                    }
                }
            }
        ]
    }

GrimaceOfDespair on 7 Jun 2018

👍2

All 5 comments

exports.MouseEvent = (window || global).MouseEvent;
^
ReferenceError: window is not defined

We also have a similar issue.
NodeJS
Table version: 13.0.0
Angular 5/ Angular Universal
TypeScript 2.6

xstation1021 on 24 May 2018

👍2

This needs to be fixed asap, universal application cannot run and gives ERROR:
ReferenceError: window is not defined
Please fix, this as the new version release doesnot have this, please fix this issue

amitmoondra on 24 May 2018

ReferenceError: window is not defined

i am also getting the same error :(

vamagithub on 24 May 2018

For now, I'm working around this with webpack. Ugly, but it does the job. Note that I use 3 identical replacements to replace the three occurrences.

    module: {
        rules: [
            {
                test: /\.(ts|js)$/, use: {
                    loader: 'string-replace-loader', options: {
                        multiple: [{
                            search: '(window || global)',
                            replace: '((typeof window !== \'undefined\' && window) || global)'
                        }, {
                            search: '(window || global)',
                            replace: '((typeof window !== \'undefined\' && window) || global)'
                        }, {
                            search: '(window || global)',
                            replace: '((typeof window !== \'undefined\' && window) || global)'
                        }]
                    }
                }
            }
        ]
    }

GrimaceOfDespair on 7 Jun 2018

👍2

@GrimaceOfDespair's PR has been merged, so this should be fixed in the next release. Please let me know if you still see the issue after that.