monaco-editor [Bug] Module parse error coming for css using angular 14 version.

trafficstars

Reproducible in vscode.dev or in VS Code Desktop?

[X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

[X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

add monaco-editor in angular-cli 14 version project and run the command ng build or ng serve

Actual (Problematic) Behavior

compilation failed with angular 14 version.

Expected Behavior

It should compile without error, since it was working 13.3.

Additional Context

./node_modules/monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .bracket-match { | box-sizing: border-box; | }

./node_modules/monaco-editor/esm/vs/editor/contrib/codeAction/browser/lightBulbWidget.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .contentWidgets .codicon-light-bulb, | .monaco-editor .contentWidgets .codicon-lightbulb-autofix { | display: flex;

./node_modules/monaco-editor/esm/vs/editor/contrib/codeAction/browser/media/action.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.codeActionMenuWidget { | padding: 8px 0px 8px 0px; | overflow: auto;

./node_modules/monaco-editor/esm/vs/editor/contrib/codelens/browser/codelensWidget.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .codelens-decoration { | overflow: hidden; | display: inline-block;

./node_modules/monaco-editor/esm/vs/editor/contrib/colorPicker/browser/colorPicker.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.colorpicker-widget { | height: 190px; | user-select: none;

./node_modules/monaco-editor/esm/vs/editor/contrib/dnd/browser/dnd.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor.vs .dnd-target, | .monaco-editor.hc-light .dnd-target { | border-right: 2px dotted black;

./node_modules/monaco-editor/esm/vs/editor/contrib/find/browser/findWidget.css:7:0 - Error: Module parse failed: Unexpected token (7:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | /* Find widget */

.monaco-editor .find-widget { | position: absolute; | z-index: 35;

./node_modules/monaco-editor/esm/vs/editor/contrib/folding/browser/folding.css:5:0 - Error: Module parse failed: Unexpected token (5:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | * Licensed under the MIT License. See License.txt in the project root for license information. | --------------------------------------------------------------------------------------------/

.monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed, | .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded, | .monaco-editor .margin-view-overlays .codicon-folding-expanded,

./node_modules/monaco-editor/esm/vs/editor/contrib/gotoError/browser/media/gotoErrorWidget.css:8:0 - Error: Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /* marker zone */ |

.monaco-editor .peekview-widget .head .peekview-title .severity-icon { | display: inline-block; | vertical-align: text-top;

./node_modules/monaco-editor/esm/vs/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .goto-definition-link { | text-decoration: underline; | cursor: pointer;

./node_modules/monaco-editor/esm/vs/editor/contrib/gotoSymbol/browser/peek/referencesWidget.css:7:0 - Error: Module parse failed: Unexpected token (7:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | /* -- zone widget */

.monaco-editor .zone-widget .zone-widget-container.reference-zone-widget { | border-top-width: 1px; | border-bottom-width: 1px;

./node_modules/monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/ghostText.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .suggest-preview-additional-widget { | white-space: nowrap; | }

./node_modules/monaco-editor/esm/vs/editor/contrib/links/browser/links.css:5:0 - Error: Module parse failed: Unexpected token (5:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | * Licensed under the MIT License. See License.txt in the project root for license information. | --------------------------------------------------------------------------------------------/

.monaco-editor .detected-link, | .monaco-editor .detected-link-active { | text-decoration: underline;

./node_modules/monaco-editor/esm/vs/editor/contrib/message/browser/messageController.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .monaco-editor-overlaymessage { | padding-bottom: 8px; | z-index: 10000;

./node_modules/monaco-editor/esm/vs/editor/contrib/parameterHints/browser/parameterHints.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .parameter-hints-widget { | /* Must be higher than the sash's z-index and terminal canvases but lower than the suggest widget */ | z-index: 39;

./node_modules/monaco-editor/esm/vs/editor/contrib/peekView/browser/media/peekViewWidget.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .peekview-widget .head { | box-sizing: border-box; | display: flex;

./node_modules/monaco-editor/esm/vs/editor/contrib/rename/browser/renameInputField.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .rename-box { | z-index: 100; | color: inherit;

./node_modules/monaco-editor/esm/vs/editor/contrib/snippet/browser/snippetSession.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .snippet-placeholder { | min-width: 2px; | outline-style: solid;

./node_modules/monaco-editor/esm/vs/editor/contrib/suggest/browser/media/suggest.css:8:0 - Error: Module parse failed: Unexpected token (8:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /* Suggest widget*/ |

.monaco-editor .suggest-widget { | width: 430px; | z-index: 40;

./node_modules/monaco-editor/esm/vs/editor/contrib/unicodeHighlighter/browser/bannerController.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.editor-banner { | box-sizing: border-box; | cursor: default;

./node_modules/monaco-editor/esm/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .unicode-highlight { | border: 1px solid var(--vscode-editorUnicodeHighlight-border); | background-color: var(--vscode-editorUnicodeHighlight-background);

./node_modules/monaco-editor/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget.css:5:0 - Error: Module parse failed: Unexpected token (5:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | * Licensed under the MIT License. See License.txt in the project root for license information. | --------------------------------------------------------------------------------------------/

.monaco-editor .zone-widget { | position: absolute; | z-index: 10;

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .accessibilityHelpWidget { | padding: 10px; | vertical-align: middle;

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .iPadShowKeyboard { | width: 58px; | min-width: 0;

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-editor .tokens-inspect-widget { | z-index: 50; | user-select: text;

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickInput/standaloneQuickInput.css:6:0 - Error: Module parse failed: Unexpected token (6:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.quick-input-widget { | font-size: 13px; | }

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/standalone-tokens.css:8:0 - Error: Module parse failed: Unexpected token (8:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | /* Default standalone editor fonts */

.monaco-editor { | font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
| --monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

./node_modules/monaco-editor/esm/vs/platform/actions/browser/menuEntryActionViewItem.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | --------------------------------------------------------------------------------------------/ |

.monaco-action-bar .action-item.menu-entry .action-label.icon { | width: 16px; | height: 16px;

Aug 28 '22 18:08 alam101

Same issue here, Angular 14.2.0 and monaco-editor 0.33 or 0.34, monaco-editor-webpack-plugin: 7.0.1

Sep 07 '22 14:09 vic29

Same problem for me with Angular 14.2.1 and Monaco editor 0.34.0

Sep 19 '22 13:09 alsoicode

Angular doesn't like CSS when getting to version 14. Can be solved by providing relevant style loader using angular-builders/custom-webpack..

Then include in project's root custom-webpack.config.js with the following loader code:

const path = require("path");
const MONACO_DIR = path.join(__dirname, "node_modules/monaco-editor");

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                include: MONACO_DIR,
                use: ["style-loader", {
                    "loader": "css-loader",
                    "options": {
                        "url": false,
                    },
                }],
            },
        ],
    },
};

Sep 22 '22 06:09 Shahar-Galukman

@Shahar-Galukman I added the custom webpack config and style-loader, css-loader and postcss-loader dependencies, however now I'm getting:

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

(2:7) /Users/btaylor/work/angular-apps/mdsl-authoring/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

  1 | 
> 2 |       import API from "!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../../style-loader/dist/runtime/insertBySelector.js";


./node_modules/monaco-editor/min/vs/editor/editor.main.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /Users/btaylor/work/angular-apps/mdsl-authoring/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

  1 | 
> 2 |       import API from "!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../../style-loader/dist/runtime/insertBySelector.js";

Sep 22 '22 13:09 alsoicode

@alsoicode Have you changed the builder in your angular.json to be using the @angular-builder/custome-webpack?

Sep 22 '22 17:09 Shahar-Galukman

Yes. Here's the relevant portion of my angular.json

architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js",
              "mergeRules": {
                "externals": "replace"
              }
            },

Here's my current custom-webpack.config.js

var path = require('path');
var MONACO_DIR = path.join(__dirname, 'node_modules/monaco-editor');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: MONACO_DIR,
        use: ['style-loader', 'css-loader', 'sass-loader']
        // loader: 'css-loader',
        // options: {
        //   import: true
        // }
      },
    ],
  },
};

Sep 23 '22 00:09 alsoicode

@alsoicode I'm having pretty similar config to yours, just providing only the css-loader. Angualr 14.2.2 and monaco 0.34.

Here it's noted style-loader cause this issue.

Try with just the css-loader

Sep 23 '22 07:09 Shahar-Galukman

Slightly different errors if I only specify css-loader:

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

(1:1) /Users/btaylor/work/angular-apps/mdsl-authoring/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

> 1 | // Imports
    | ^
  2 | import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from "../../../../css-loader/dist/runtime/sourceMaps.js";
  3 | import ___CSS_LOADER_API_IMPORT___ from "../../../../css-loader/dist/runtime/api.js";


./node_modules/monaco-editor/min/vs/editor/editor.main.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/btaylor/work/angular-apps/mdsl-authoring/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word

> 1 | // Imports
    | ^
  2 | import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from "../../../../css-loader/dist/runtime/sourceMaps.js";
  3 | import ___CSS_LOADER_API_IMPORT___ from "../../../../css-loader/dist/runtime/api.js";

Sep 24 '22 02:09 alsoicode

@alsoicode Not too sure mate, css-loader with url option set to false managed to handle this library css loading in my Angular 14.2.2 app. Would suggest fiddle with the loader configuration until satisfied.

Sep 25 '22 04:09 Shahar-Galukman

I was able to get the CSS issue resolved with the following config:

var path = require('path');
var MONACO_DIR = path.join(__dirname, 'node_modules/monaco-editor');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: MONACO_DIR,
        use: ['css-loader', {
          options: {
            url: false
          }
        }],
      },
    ],
  },
};

However now I have a TON of other JavaScript related errors:

./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionViewItems.js:14:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.js:44:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/aria/aria.js:7:0-20 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/button/button.js:9:0-22 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codiconStyles.js:6:0-31 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codiconStyles.js:7:0-41 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/contextview/contextview.js:10:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/countBadge/countBadge.js:9:0-26 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/dropdown/dropdown.js:10:0-24 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/dropdown/dropdownActionViewItem.js:9:0-24 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/findinput/findInput.js:10:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/findinput/replaceInput.js:11:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/hover/hoverWidget.js:9:0-21 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/iconLabel/iconLabel.js:5:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/inputbox/inputBox.js:16:0-24 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/keybindingLabel/keybindingLabel.js:8:0-31 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/list/listPaging.js:9:0-20 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/list/listWidget.js:62:0-20 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/mouseCursor/mouseCursor.js:5:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/progressbar/progressbar.js:10:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/sash/sash.js:21:0-20 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/scrollbar/scrollableElement.js:17:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/splitview/splitview.js:15:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/table/tableWidget.js:10:0-21 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/toggle/toggle.js:9:0-22 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/browser/ui/tree/abstractTree.js:57:0-26 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/parts/quickinput/browser/quickInput.js:56:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/parts/quickinput/browser/quickInputBox.js:11:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/parts/quickinput/browser/quickInputList.js:62:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/base/parts/quickinput/browser/quickInputUtils.js:7:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/controller/textAreaHandler.js:5:0-31 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/blockDecorations/blockDecorations.js:6:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/currentLineHighlight/currentLineHighlight.js:5:0-36 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/decorations/decorations.js:5:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/glyphMargin/glyphMargin.js:5:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/indentGuides/indentGuides.js:5:0-28 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/lineNumbers/lineNumbers.js:5:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/lines/viewLines.js:5:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/linesDecorations/linesDecorations.js:5:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/marginDecorations/marginDecorations.js:5:0-33 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/minimap/minimap.js:5:0-23 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/overlayWidgets/overlayWidgets.js:5:0-30 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/rulers/rulers.js:5:0-22 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.js:5:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/selections/selections.js:5:0-26 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/viewCursors/viewCursors.js:5:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js:52:0-28 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/widget/diffEditorWidget.js:21:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/browser/widget/diffReview.js:53:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/anchorSelect/browser/anchorSelect.js:54:0-28 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js:7:0-31 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeActionMenu.js:57:0-28 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/codeAction/browser/lightBulbWidget.js:24:0-31 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/codelens/browser/codelensWidget.js:7:0-30 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/colorPicker/browser/colorPickerWidget.js:12:0-27 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/dnd/browser/dnd.js:7:0-19 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/find/browser/findWidget.js:48:0-26 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js:25:0-23 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/gotoError/browser/gotoErrorWidget.js:27:0-37 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition.js:24:0-40 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/gotoSymbol/browser/peek/referencesWidget.js:58:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/ghostTextWidget.js:24:0-25 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/links/browser/links.js:61:0-21 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/message/browser/messageController.js:22:0-33 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/parameterHints/browser/parameterHintsWidget.js:27:0-30 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/peekView/browser/peekView.js:26:0-36 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/rename/browser/renameInputField.js:20:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/snippet/browser/snippetSession.js:22:0-30 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestWidget.js:61:0-29 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/unicodeHighlighter/browser/bannerController.js:20:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.js:57:0-34 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget.js:11:0-26 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js:19:0-33 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js:5:0-32 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js:19:0-29 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickInput/standaloneQuickInputService.js:19:0-36 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js:5:0-33 - Error: Module not found: Error: request argument is not a string

./node_modules/monaco-editor/esm/vs/platform/actions/browser/menuEntryActionViewItem.js:59:0-39 - Error: Module not found: Error: request argument is not a string

Sep 25 '22 12:09 alsoicode

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                include: MONACO_DIR,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test: /\.ttf$/,
                include: MONACO_DIR,
                use: ['file-loader']
            }
        ]
    },
    plugins: [
        new MonacoEditorWebpackPlugin({
            languages: ["typescript", "javascript", "css", "html", "kotlin", "swift", "java", "python", "csharp", "cpp", "rust", "go", "php", "ruby", "scala", "lua", "perl", "sql", "json", "yaml", "xml", "markdown", "plaintext"]
        }),
    ]
};

This is my webpack.config.js. I use the monaco-editor-webpack-plugin.

Everything looks fine, the only problem is that the file-loader doesn't seem to take effect for ttf, I get this error in the dev-tools console

Not allowed to load local resource: file:///....../node_modules/.pnpm/[email protected]/node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf

Apart from that I get a monaco displayed correctly

@Shahar-Galukman

After trying for a long time, I still haven't been able to solve this problem, please do I miss something?

Sep 27 '22 17:09 BppleMan

@alsoicode have you been able to solve the issue? At the moment, I do get the exact same messages.

Dec 15 '22 15:12 heinerlamprecht

Setting url to false in css-loader will solver the ttf file issue. It's because the import seems to be pointing to a local file, which is not allowed in browser.

Jan 31 '23 19:01 jmroon

Getting the same errors on Angular v15.x. Any update on the exact solution to the problem?

@hediet @alsoicode @Shahar-Galukman any pointers to the solution?

Feb 10 '23 13:02 sahilbabbar

Resolved.

Refer: https://github.com/microsoft/monaco-editor/issues/3553

Feb 16 '23 07:02 sahilbabbar

monaco-editor monaco-editor copied to clipboard

[Bug] Module parse error coming for css using angular 14 version.

Reproducible in vscode.dev or in VS Code Desktop?

Reproducible in the monaco editor playground?

Monaco Editor Playground Code

Reproduction Steps

Actual (Problematic) Behavior

Expected Behavior

Additional Context

monaco-editor
monaco-editor copied to clipboard