Closed alam101 closed 1 year ago
Same issue here, Angular 14.2.0 and monaco-editor 0.33 or 0.34, monaco-editor-webpack-plugin: 7.0.1
Same problem for me with Angular 14.2.1 and Monaco editor 0.34.0
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,
},
}],
},
],
},
};
@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";
@alsoicode Have you changed the builder in your angular.json to be using the @angular-builder/custome-webpack
?
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
// }
},
],
},
};
@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
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";
@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.
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
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?
@alsoicode have you been able to solve the issue? At the moment, I do get the exact same messages.
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.
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?
Resolved.
Refer: https://github.com/microsoft/monaco-editor/issues/3553
Reproducible in vscode.dev or in VS Code Desktop?
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
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
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
./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 /
./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. | --------------------------------------------------------------------------------------------*/
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
./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 /
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
./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. | --------------------------------------------------------------------------------------------*/
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
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
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
./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. | --------------------------------------------------------------------------------------------*/
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
./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 /
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