ReferenceError: MouseEvent is not defined (10.0.0)

[Owain94]

I'm submitting a ... (check one with "x")

[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 I make a build for NodeJS with version 10.0.0 I get the following error when I try to run the bundle.

webpack-internal:///758:1919
        __metadata("design:paramtypes", [MouseEvent]),
                                         ^

ReferenceError: MouseEvent is not defined

This only happens on JiT builds and not on AoT builds.

Expected behavior

The same behavior as with version 9.3.1 where this issue wasn't present.

Reproduction of the problem

Angular universal build with ngx-datatable version 10.0.0 (JiT build for the server).

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 10.0.0

• Angular version: 4.3.3

[amcdnl]

Can you see which file its in thats causing this?

I temp made it in any in 10.0.1

[Owain94]

The only thing that fully worked for me was the same solution as in https://github.com/valor-software/ngx-bootstrap.

Changing all the MouseEvent types and KeyboardEvent types to any and removing the https://github.com/swimlane/ngx-datatable/blob/master/src/events.ts file.

[sebichondo]

This is how i fixed this issue in the webpack.config.js
{ test: /.(ts|js)$/, loader: 'regexp-replace-loader', query: { match: { pattern: '\[(Mouse|Keyboard)Event\]', flags: 'g' }, replaceWith: '[]', } }

[crebuh]

@sebichondo

how did you add this to your webpack.config.js exactly? how are you compiling the ts-files? use @ngtools/webpack or ts-loader?

[sebichondo]

@crebuh here is my webpack.config.js file

`const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
{ test: /.html$/, use: 'html-loader?minimize=false' },
{ test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{
test: /.scss$/, use:
[{
loader: 'to-string-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
{ test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /.(ts|js)$/, loader: 'regexp-replace-loader', query: { match: { pattern: '\[(Mouse|Keyboard)Event\]', flags: 'g' }, replaceWith: '[]' } },
{ test: /.(ts|js)$/, loader: 'regexp-replace-loader', query: { match: { pattern: '\[Event\]', flags: 'g' }, replaceWith: '[]' } }
]
},
plugins: [new CheckerPlugin()]
};

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
    entry: { 'main-client': './ClientApp/boot.browser.ts' },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })
    ] : [
        // Plugins that apply in production builds only
        new webpack.optimize.UglifyJsPlugin(),
        new AotPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
            exclude: ['./**/*.server.ts']
        })
    ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot.server.ts' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./ClientApp/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new AotPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
            exclude: ['./**/*.browser.ts']
        })
    ]),
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map'
});

return [clientBundleConfig, serverBundleConfig];

};
`