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

alam101 commented 2 years ago

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;

vic29 commented 2 years ago

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

alsoicode commented 2 years ago

Same problem for me with Angular 14.2.1 and Monaco editor 0.34.0

Shahar-Galukman commented 2 years ago

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,
                    },
                }],
            },
        ],
    },
};

alsoicode commented 2 years ago

@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";

Shahar-Galukman commented 2 years ago

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

alsoicode commented 2 years ago

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
        // }
      },
    ],
  },
};

Shahar-Galukman commented 2 years ago

@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

alsoicode commented 2 years ago

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";

Shahar-Galukman commented 2 years ago

@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.

alsoicode commented 2 years ago

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

BppleMan commented 2 years ago

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/monaco-editor@0.34.0/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?

heinerlamprecht commented 1 year ago

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

jmroon commented 1 year ago

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.

sahilbabbar commented 1 year ago

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?

sahilbabbar commented 1 year ago

Resolved.

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

microsoft / monaco-editor