loaderContext.utils is "undefined", Causes a report that the "contextify" attribute cannot be read from "undefined".

[LP1994]

Bug report

Actual Behavior

releases: style-loader v4.0.0

File reporting errors: style-loader/dist/utils.js

The line of code that reported the error: https://github.com/webpack-contrib/style-loader/blob/master/src/utils.js#L7

code:

function stringifyRequest(loaderContext, request) {
  return JSON.stringify(
    loaderContext.utils.contextify(loaderContext.context, request),
  );
}

error message: loaderContext.utils is "undefined", Causes a report that the "contextify" attribute cannot be read from "undefined".

Expected Behavior

In the previous version "style-loader@3.3.4", it is possible to use it without error. code:

// TODO simplify for the next major release
function stringifyRequest( loaderContext, request ){
  if(
    typeof loaderContext.utils !== "undefined" &&
    typeof loaderContext.utils.contextify === "function"
  ){
    return JSON.stringify(
      loaderContext.utils.contextify( loaderContext.context, request )
    );
  }

  const splitted = request.split( "!" );
  const { context } = loaderContext;

  return JSON.stringify(
    splitted
      .map( ( part ) => {
        // First, separate singlePath from query, because the query might contain paths again
        const splittedPart = part.match( /^(.*?)(\?.*)/ );
        const query = splittedPart
                      ? splittedPart[ 2 ]
                      : "";
        let singlePath = splittedPart
                         ? splittedPart[ 1 ]
                         : part;

        if( isAbsolutePath( singlePath ) && context ){
          singlePath = path.relative( context, singlePath );

          if( isAbsolutePath( singlePath ) ){
            // If singlePath still matches an absolute path, singlePath was on a different drive than context.
            // In this case, we leave the path platform-specific without replacing any separators.
            // @see https://github.com/webpack/loader-utils/pull/14
            return singlePath + query;
          }

          if( isRelativePath( singlePath ) === false ){
            // Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
            singlePath = `./${ singlePath }`;
          }
        }

        return singlePath.replace( /\\/g, "/" ) + query;
      } )
      .join( "!" )
  );
}

How Do We Reproduce?

This is a mistake that is bound to occur in development mode!

Please paste the results of npx webpack-cli info here, and mention other relevant information

[alexander-akait]

Please update webpack to the latest version, you don't provide npx webpack-cli info, so I can't help, feel free to feedback

[LP1994]

Please update webpack to the latest version, you don't provide npx webpack-cli info, so I can't help, feel free to feedback System: OS: Windows 11 10.0.22631 CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13980HX Memory: 38.85 GB / 63.77 GB Binaries: Node: 21.7.2 - D:\NodeJS\node.EXE Yarn: 1.22.19 - G:\WebStormWS\web-project-template\node_modules.bin\yarn.CMD npm: 10.5.1 - G:\WebStormWS\web-project-template\node_modules.bin\npm.CMD Browsers: Edge: Chromium (123.0.2420.81) Internet Explorer: 11.0.22621.1 Packages: @webpack-cli/generators: ^3.0.7 => 3.0.7 @webpack-cli/info: ^2.0.2 => 2.0.2 @webpack-cli/init: ^1.1.3 => 1.1.3 @webpack-cli/serve: ^2.0.5 => 2.0.5 @webpack-cli/utils: ^1.2.1 => 1.2.1 @webpack-cli/webpack-scaffold: ^1.0.3 => 1.0.3 assets-webpack-plugin: ^7.1.1 => 7.1.1 babel-loader: ^9.1.3 => 9.1.3 babel-plugin-dynamic-import-webpack: ^1.1.0 => 1.1.0 buble-loader: ^0.5.1 => 0.5.1 bundle-loader: ^0.5.6 => 0.5.6 cache-loader: ^4.1.0 => 4.1.0 clean-webpack-plugin: ^4.0.0 => 4.0.0 compression-webpack-plugin: ^11.1.0 => 11.1.0 copy-webpack-plugin: ^12.0.2 => 12.0.2 cson-loader: ^0.1.0 => 0.1.0 css-loader: ^7.1.0 => 7.1.0 css-minimizer-webpack-plugin: ^6.0.0 => 6.0.0 csv-loader: ^3.0.5 => 3.0.5 declaration-bundler-webpack-plugin: ^1.0.3 => 1.0.3 duplicate-package-checker-webpack-plugin: ^3.0.0 => 3.0.0 dynamic-cdn-webpack-plugin: ^5.0.0 => 5.0.0 ejs-loader: ^0.5.0 => 0.5.0 esbuild-loader: ^4.1.0 => 4.1.0 exports-loader: ^5.0.0 => 5.0.0 expose-loader: ^5.0.0 => 5.0.0 extract-loader: ^5.1.0 => 5.1.0 file-loader: ^6.2.0 => 6.2.0 filemanager-webpack-plugin: ^8.0.0 => 8.0.0 fork-ts-checker-notifier-webpack-plugin: ^9.0.0 => 9.0.0 fork-ts-checker-webpack-plugin: ^9.0.2 => 9.0.2 generate-package-json-webpack-plugin: ^2.6.0 => 2.6.0 gzip-loader: ^0.0.1 => 0.0.1 handlebars-loader: ^1.7.3 => 1.7.3 html-loader: ^5.0.0 => 5.0.0 html-minimizer-webpack-plugin: ^5.0.0 => 5.0.0 html-webpack-plugin: ^5.6.0 => 5.6.0 i18n-loader: ^0.3.0 => 0.3.0 icons-loader: ^0.0.6 => 0.0.6 image-minimizer-webpack-plugin: ^4.0.0 => 4.0.0 image-webpack-loader: ^8.1.0 => 8.1.0 json-loader: ^0.5.7 => 0.5.7 json-minimizer-webpack-plugin: ^5.0.0 => 5.0.0 json5-loader: ^4.0.1 => 4.0.1 less-loader: ^12.2.0 => 12.2.0 lodash-webpack-plugin: ^0.11.6 => 0.11.6 markdown-loader: ^8.0.0 => 8.0.0 markup-inline-loader: ^4.0.0 => 4.0.0 mocha-loader: ^5.1.5 => 5.1.5 module-mapping-webpack-plugin: ^1.1.1 => 1.1.1 mustache-loader: ^1.4.3 => 1.4.3 optimize-css-assets-webpack-plugin: ^6.0.1 => 6.0.1 postcss-loader: ^8.1.1 => 8.1.1 posthtml-loader: ^2.0.1 => 2.0.1 pug-loader: ^2.4.0 => 2.4.0 raw-loader: ^4.0.2 => 4.0.2 sass-loader: ^14.1.1 => 14.1.1 service-worker-loader: ^4.0.2 => 4.0.2 shared-worker-loader: ^0.2.0 => 0.2.0 style-loader: ^4.0.0 => 4.0.0 stylelint-webpack-plugin: ^5.0.0 => 5.0.0 stylus-loader: ^8.1.0 => 8.1.0 svg-inline-loader: ^0.8.2 => 0.8.2 svg-url-loader: ^8.0.0 => 8.0.0 terser-webpack-plugin: ^5.3.10 => 5.3.10 thread-loader: ^4.0.2 => 4.0.2 ts-loader: ^9.5.1 => 9.5.1 typedoc-webpack-plugin: ^1.1.4 => 1.1.4 uglifyjs-webpack-plugin: ^2.2.0 => 2.2.0 url-loader: ^4.1.1 => 4.1.1 val-loader: ^6.0.0 => 6.0.0 vite-plugin-xml-loader: ^1.0.2 => 1.0.2 vue-loader: ^17.4.2 => 17.4.2 vue-style-loader: ^4.1.3 => 4.1.3 wasm-loader: ^1.3.0 => 1.3.0 wasm-module-webpack-plugin: ^3.0.0 => 3.0.0 webpack: ^5.91.0 => 5.91.0 webpack-aspnet-middleware: ^2.3.1 => 2.3.1 webpack-bundle-analyzer: ^4.10.1 => 4.10.1 webpack-chain: ^6.5.1 => 6.5.1 webpack-cli: ^5.1.4 => 5.1.4 webpack-closure-compiler: ^2.1.6 => 2.1.6 webpack-combine-loaders: ^2.0.4 => 2.0.4 webpack-config-utils: ^2.3.1 => 2.3.1 webpack-core: ^0.6.9 => 0.6.9 webpack-dashboard: ^3.3.8 => 3.3.8 webpack-dev-middleware: ^7.2.1 => 7.2.1 webpack-dev-server: ^5.0.4 => 5.0.4 webpack-graphql-loader: ^1.0.2 => 1.0.2 webpack-hot-client: ^4.2.0 => 4.2.0 webpack-hot-middleware: ^2.26.1 => 2.26.1 webpack-istanbul-plugin: ^0.0.5 => 0.0.5 webpack-log: ^3.0.2 => 3.0.2 webpack-manifest-plugin: ^5.0.0 => 5.0.0 webpack-md5-hash: ^0.0.6 => 0.0.6 webpack-merge: ^5.10.0 => 5.10.0 webpack-node-externals: ^3.0.0 => 3.0.0 webpack-notifier: ^1.15.0 => 1.15.0 webpack-parallel-uglify-plugin: ^2.0.0 => 2.0.0 webpack-plugin-ramdisk: ^0.2.0 => 0.2.0 webpack-plugin-serve: ^1.6.0 => 1.6.0 webpack-pwa-manifest: ^4.3.0 => 4.3.0 webpack-serve: ^4.0.0 => 4.0.0 webpack-sources: ^3.2.3 => 3.2.3 webpack-split-by-path: ^2.0.0 => 2.0.0 webpack-stream: ^7.0.0 => 7.0.0 webpack-subresource-integrity: ^5.1.0 => 5.1.0 webpack-validator: ^3.0.1 => 3.0.1 workbox-webpack-plugin: ^7.0.0 => 7.0.0 worker-loader: ^3.0.8 => 3.0.8 xml-loader: ^1.2.1 => 1.2.1

[alexander-akait]

I see, the problem is here thread-loader, please open an issue there

[alexander-akait]

I will try to fix it soon, anyway you can send a PR too, I will be glad, thread-loader just doesn't pass it to loader context

[LP1994]

I will try to fix it soon, anyway you can send a PR too, I will be glad, thread-loader just doesn't pass it to loader context

Thanks so much, I've been troubleshooting all morning and yes I have troubleshot css-loader, style-loader, thread-loader, but didn't figure out the exact cause and had to migrate the code from the last viable version.

[alexander-akait]

Temporary you can disable thread-loader and check perf, if you will enabled webpack cache https://webpack.js.org/configuration/cache/ I think you have better time than even with thread-loader, check it out

[LP1994]

Temporary you can disable thread-loader and check perf, if you will enabled webpack cache https://webpack.js.org/configuration/cache/ I think you have better time than even with thread-loader, check it out

I just changed the configuration as you pointed out, and it is working successfully. Thank you very much for your reply and guidance.

[LP1994]

Temporary you can disable thread-loader and check perf, if you will enabled webpack cache https://webpack.js.org/configuration/cache/ I think you have better time than even with thread-loader, check it out

Do you mean that in "webpack v5", enabling "webpack cache" will have better runtime than "thread-loader"?

If so, I'll have to change my configuration, I've been using both "webpack cache" and "thread-loader" in development mode.

[alexander-akait]

Do you mean that in "webpack v5", enabling "webpack cache" will have better runtime than "thread-loader"?

And yes and no, it based on size of your project, better to check it out

If so, I'll have to change my configuration, I've been using both "webpack cache" and "thread-loader" in development mode.

Yes, you can use both things without problems, except problem with compatibility with some function of thread-loader

[LP1994]

Got it, then I'll note the actual running time of the project. Thanks for the pointers.

[wallzero]

I am running into this issue as well.

[alexander-akait]

please run npm ls webpack