__MK_GLOBAL__ is not defined on adding css.

[Shuraken007]

Hi there.
I added rm_style.css to userscript.
With default rules:

       rules: [
         {
            exclude: /(node_modules)/,
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
         },
      ],

Webpack processed this, added text from file.
Also it inserted this block to compiled file

!*** ./node_modules/webpack-monkey/lib/node/deps/style-loader-insertStyleElement.js ***!
...
module.exports = function () {
  return __MK_GLOBAL__.styleLoaderInsertStyleElement.apply(null, arguments)
}
...

I got error Uncaught (in promise) ReferenceError: __MK_GLOBAL__ is not defined

I grepped packages - it's your package constant

./webpack-monkey/lib/client/client.js:window.__MK_GLOBAL__ = {
./webpack-monkey/lib/client/client.js:const { userscripts } = __MK_GLOBAL__;
./webpack-monkey/lib/client/client.js:    if (__MK_GLOBAL__.debug) {
./webpack-monkey/lib/shared/constants.js:exports.VAR_MK_GLOBAL = "__MK_GLOBAL__";
./webpack-monkey/lib/node/deps/style-loader-insertStyleElement.js:  return __MK_GLOBAL__.styleLoaderInsertStyleElement.apply(null, arguments)
./webpack-monkey/lib/node/deps/mini-css-extract-hmr.js:  return __MK_GLOBAL__.miniCssExtractHmr.apply(null, arguments)

I googled and founded only one mention of this problem.
https://gitlab.com/Pyztug-9mafda-tifxac/voice-over-translation/-/blob/e7a357a5dd7f5060bbc7359d899b62df2040efcb/webpack.config.js

So I added same manipulations to redefine constant manually.
Everything works. Browser loaded and applied styles.

const webpack = require("webpack")
const { styleLoaderInsertStyleElement } = require("webpack-monkey/lib/client/css.js")
//------------------------------------------------------------

   plugins: [
      new webpack.DefinePlugin({
         __MK_GLOBAL__: {
            styleLoaderInsertStyleElement,
         },
      }),
   ],

I'm using Tampermonkey v5.3.3 from Google Chrome Store
https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
Last chrome version: 133.0.6943.142
I added script via 'import as url' (no dev-server).

[Giglium]

I've encountered this issue before. To solve it, I copied the configuration of the userscript repository from @guansss. The issue disappeared after I imported the mini-css-extract-plugin. Maybe this is an opportunity to confirm this solution and update the README.

If you want to try run npm install --save-dev mini-css-extract-plugin and update your webpack.config.js to look like:

const path = require("path");
const { monkey } = require("webpack-monkey");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = monkey({
  ...
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  ...
});

Note my configuration it's also for sass, but you can omit it if you don't use it