4

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

  • Thanks for editing upload question from mobile hard to edit – Lori Feb 14 at 19:12
3

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);
  • I have found that this change to gulpfile.js also works with other frameworks that generate this error. – CoreyRoth Mar 20 at 0:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.