Including React Kendo Grid in SPFx web part throws warnings during build

Question

I have got a kendo grid built into a SharePoint SPFx web part. All works great in my local work bench however when I go to build the kendo components give lots of errors.

Seems to be a known issue has they have it documented on their github however my inexperience with configuring webpack to exclude node_modules has me stumped.

I followed the following (or tried to) Issue .

which seemed to be my issue.

So I followed this.

So I could edit the configure webpack.

So my Gulpfile.js looks like (doesn't work):

build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
      generatedConfiguration.module.rules.push(
        {
            enforce: 'pre',
        test: /\.js$/,
        loader: "source-map-loader",
        exclude: [
             /\/node_modules\//        
          ]

        }
      );

      return generatedConfiguration;
    }
  });

Any pointers please on where I am going wrong would be fantastic or other solutions to try

Sample of error:

NonErrorEmittedError: (Emitted value instead of an instance of Error) Cannot find source file '../../../src/Localization/main.ts': Error: Can't resolve '../../../src/Localization/main.ts' in 'C:/dev2019/WebParts/GraphGrid/node_modules/@progress/kendo-react-intl/dist/es/Localization' at emitWarning

Answer 1

The SharePoint Framework webpack config already contains a definition for source-map-loader but it doesn't have the exclude property. You can check this by doing a console.log(generatedConfiguration.module.rules)

Even if you add a new definition for the loader, both tests will execute as part of the webpack config and the warnings will be thrown for the out of the box SPFx definition.

So we need to update the existing source-map-loader definition to have an exclude property. This gulpfile.js should work for you:

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const path = require('path');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.configureWebpack.mergeConfig({

    additionalConfiguration: (generatedConfiguration) => {

        generatedConfiguration.module.rules.map(rule => {
            if (rule.use.indexOf("source-map-loader") != -1) {
                rule.exclude = path.resolve(__dirname, "node_modules");
            }
        });

        return generatedConfiguration;
    }
});

build.initialize(gulp);