Issue with Integrating Yjs and Monaco-Editor in Angular - Error with Webpack CSS Dependencies

Question

I'm working on an Angular project where I'm trying to implement a collaborative text editor. The libraries I'm using are monaco-editor and Yjs.

I managed to import monaco-editor into Angular by following the documentation of a certain wrapper, but faced difficulties when trying to bind a Yjs Document to monaco-editor using a specific library, which required a custom webpack configuration.

To solve this, I replicated a webpack configuration I found on GitHub issue #3553 of monaco-editor:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [
      new MiniCssExtractPlugin()
    ],
    entry: {
        app: './index.js',
        // Package each language's worker and give these filenames in `getWorkerUrl`
        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
        'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
        'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
        'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
        'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test: /\.ttf$/,
                use: ['file-loader']
            }
        ]
    }
};

However when I try to compile the project with ng build, I get this error:

./src/app/app.component.css?ngResource - Error: No template for dependency: CssDependency

./src/app/monaco-editor/monaco-editor.component.css?ngResource - Error: No template for dependency: CssDependency

Error: The loader "/home/lancelot/Sync/gradescript/cdrt/src/app/app.component.css" didn't return a string.

Error: The loader "/home/lancelot/Sync/gradescript/cdrt/src/app/monaco-editor/monaco-editor.component.css" didn't return a string.

I suspect this error could be related to the mini-css-extract-plugin as a similar error was reported in their repo: See Issue #493 of mini-css-extract-plugin repo. However, none of the solutions proposed there solved my problem. I've already confirmed:

1. There are no multiple webpack packages with varying versions in package.json causing dependency issues.

2. The {plugins: [new MiniCssExtractPlugin()]} plugin is added to the custom-webpack.config.js file.

Furthermore, I attempted alternative configurations for CSS parsing rules like using ["script-loader", "css-loader"] instead of the MiniCssExtractPlugin. Unfortunately, that only resulted in different errors:

./node_modules/monaco-editor/min/vs/editor/editor.main.css - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):

SyntaxError

(1:1) /home/lancelot/Sync/gradescript/cdrt/CSSDependencyIssue/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

> 1 | require("!!/home/lancelot/Sync/gradescript/cdrt/CSSDependencyIssue/node_modules/script-loader/addScript.js")(require("!!/home/lancelot/Sync/gradescript/cdrt/CSSDependencyIssue/node_modules/raw-loader/index.js!/home/lancelot/Sync/gradescript/cdrt/CSSDependencyIssue/node_modules/css-loader/dist/cjs.js!/home/lancelot/Sync/gradescript/cdrt/CSSDependencyIssue/node_modules/monaco-editor/min/vs/editor/editor.main.css?ngGlobalStyle"))
    | ^

I found similar issues reported on StackOverflow and Github, but none of their solutions have resolved my problem.

here is a minimal reproducible test repo: https://github.com/lancelotnd/CSSDependencyIssue