Cannot read property 'replace' of undefined

[parliament718]

• Version: 2.8.2

I'm not able to compile my app with electron-webpack devanymore. The compilation error is as follows (I get one of these errors for just about every scss file in my library):

ERROR in ./projects/my-lib/src/lib/modules/my-component.component.scss
  Module build failed (from ./node_modules/electron-webpack/node_modules/mini-css-extract-plugin/dist/loader.js):
  TypeError: Cannot read property 'replace' of undefined
      at normalizeBackSlashDirection (/Users/vayrapetyan/code/botmain/client/node_modules/webpack/lib/RequestShortener.js:16:17)
      at new RequestShortener (/Users/vayrapetyan/code/botmain/client/node_modules/webpack/lib/RequestShortener.js:26:15)
      at new Compiler (/Users/vayrapetyan/code/botmain/client/node_modules/webpack/lib/Compiler.js:195:27)
      at Compiler.createChildCompiler (/Users/vayrapetyan/code/botmain/client/node_modules/webpack/lib/Compiler.js:558:25)
      at Compilation.createChildCompiler (/Users/vayrapetyan/code/botmain/client/node_modules/webpack/lib/Compilation.js:2243:24)
      at Object.pitch (/Users/vayrapetyan/code/botmain/client/node_modules/electron-webpack/node_modules/mini-css-extract-plugin/dist/loader.js:89:43)

My webpack.renderer.additions.js doesnt have much, so mostly using defaults. This configuration was working for me for a long time. I'm not sure what changed. I recently upgraded from Angular 10 to 11, but I have since been able to compile successfully. Now all of a sudden Im getting that error.

webpack.renderer.additions.js :

const merge = require('webpack-merge');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

module.exports = function (config) {

    const styleRules = config.module.rules.filter(rule =>
        rule.test.toString().match(/css|less|s\(\[ac\]\)ss/)
    );

    styleRules.forEach(rule => {
        const cssLoader = rule.use.find(use => use.loader === 'css-loader');
        cssLoader.options.modules = false;
    });

    const rendererConfig = {
        devtool: 'eval-source-map',
        plugins: [
            new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.app.json',
                mainPath: './src/renderer/index.ts',
                entryModule: './src/renderer/ui/app/app.module#AppModule',
                sourceMap: true
            })
        ],
        module: {

            rules: [
                {
                    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                    loader: '@ngtools/webpack'
                },
                {
                    test: /\.(html)$/,
                    use: {
                        loader: "html-loader",
                        options: {
                            removeAttributeQuotes: false,
                            keepClosingSlash: true,
                            caseSensitive: true,
                            conservativeCollapse: true,
                        }
                    }
                },
            ]
        }
    };

    return merge.smart(config, rendererConfig);
};

[loopmode]

Hmm seems to be a general issue with compatibility between angular and mini css extract plugin... See for example https://github.com/webpack-contrib/mini-css-extract-plugin/issues/186

[parliament718]

Thanks that helped me resolve it.

I was aware of that issue and I was already following that approach of importing scss files directly in the TS file instead of using styleUrls on components.

In my Angular library (separately in /projects folder), I still use styleUrls since the library gets compiled separately and imported from the compiled code in node_modules (via npm link)

The oversight was that VScode put an automatic import from "projects/mylib/..." instead of import from 'mylib' and that caused source files with styleUrls to get inadvertantly imported.

Changing that one instance to import from 'mylib' solved the issue.