[Solved] Build Errors - spfx and kendo grid

[Lori]

On going to build my grid (which works fine when viewing on workbench) I get the following

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 (C:/dev2019/WebParts/GraphGrid/node_modules/webpack/lib/NormalModule.js:117:16)
    at C:/dev2019/WebParts/GraphGrid/node_modules/source-map-loader/index.js:80:7
    at onError (C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
    at loggingCallbackWrapper (C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (C:/dev2019/WebParts/GraphGrid/node_modules/tapable/lib/Tapable.js:252:11)
    at C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (C:/dev2019/WebParts/GraphGrid/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
@ ./node_modules/@progress/kendo-react-intl/dist/es/main.js 2:0-36
@ ./node_modules/@progress/kendo-react-grid/dist/es/GridNoRecords.js
@ ./node_modules/@progress/kendo-react-grid/dist/es/main.js

 

After looking around on the git issues I came across

https://github.com/telerik/kendo-react/issues/126

which seemed to be my issue.

So I followed this

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline

so I could edit the configure webpack.

so my Gulpfile.js looks like

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

        }
      );

      return generatedConfiguration;
    }
  });

 

But I still get all of my errors

 

Please can anyone give some help on this.

[Stefan]

Hello, 

Thank you for the details, the issue indeed seems to be the same.

After inspecting the mode I noticed some syntax differences, but I`m not sure if they are making the difference.

Here it is passed as an array:

https://github.com/webpack-contrib/source-map-loader

test: /\.js$/,
use: ["source-map-loader"],
enforce: "pre

In the Spfx site it also has use and an array:

use: [
  {
    loader: 'html-loader'
  },
  {
    loader: 'markdown-loader'
  }
]

Additionally, it targets only js files, please try adding ts or tsx as well.

Regards,
Stefan
Progress Telerik

[Lori]

I changed my gulpfile.js to and it now supressed the error

 

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. I changed the gulpfile.js to

'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);

[Stefan]

Hello, Lori,

Thank you for sharing the details and the configuration that helps to suppress the error.

This will be very helpful to other users from the community that has a similar issue. This is highly appreciated.

Regards,
Stefan
Progress Telerik