Cannot set property webpackLoaderContext of undefined

[wassim-k]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I'm using a custom importer in my project and since the latest update I've been getting the following error:
SassError: Cannot set property 'webpackLoaderContext' of undefined

I've tested it on node v12.22.1 and 14.17.0

Here is the diff that solved my problem:

diff --git a/node_modules/sass-loader/dist/utils.js b/node_modules/sass-loader/dist/utils.js
index 6dac02c..24fc595 100644
--- a/node_modules/sass-loader/dist/utils.js
+++ b/node_modules/sass-loader/dist/utils.js
@@ -93,8 +93,8 @@ function isProductionLikeMode(loaderContext) {
 
 function proxyCustomImporters(importers, loaderContext) {
   return [].concat(importers).map(importer => function proxyImporter(...args) {
-    this.webpackLoaderContext = loaderContext;
-    return importer.apply(this, args);
+    const self = { webpackLoaderContext: loaderContext };
+    return importer.apply(self, args);
   });
 }
 

[alexander-akait]

Please provide code of your custom importer or steps to reproduce

[wassim-k]

Thanks for the quick response, I've uploaded a minimal reporoduction of the issue to this repository

It's a minimal Angular v12 repo with @angular-builders/custom-webpack which allows modifying the webpack config in order to add the custom sass importer.

I've added a dummy importer because the issue does not seem to be with the implementation of the importer but rather with the way it's invoked, there's a chance the way Angular's SassWorkerImplementation invokes the importer logic using workers is what causes this to be undefined in an anonymous function.

This could be related too:
Why is “this” in an anonymous function undefined when using strict?

Run yarn start to see the error
You can run yarn start:inspect and then F5 in VSCode to debug the execution and enable breakpointing.

[alexander-akait]

I see, feel free to send a fix, as you can see it is easy 👍

[wassim-k]

PR created #956