Syntax highlighting is ok, but doesn't show any errors.

[sonsuzdejavu]

Syntax highlighting is ok, but doesn't show any errors.
Line 5 should show an error in red at end of the line in editor, but not.
Why could that be?

index.js

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript';
import 'monaco-editor/esm/vs/basic-languages/python/python';

monaco.editor.create(document.getElementById('duzenleyici'), {
    value: ``,
    language: 'python',
    theme: 'vs-dark',
    wordWrap: true,
    automaticLayout: true,
});

webpack.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'monaco.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.ttf$/,
                use: ['file-loader'],
            },
        ],
    },
    plugins: [
        new MonacoWebpackPlugin({
            languages: ['javascript', 'python'],
            features: ['find', 'bracketMatching', 'comment', 'folding', 'suggest', 'contextmenu', 'coreCommands', 'rename', 'wordHighlighter', 'codeAction', 'clipboard', 'linesOperations', 'gotoError', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations'],
            globalAPI: true,
            publicPath: '/',
        }),
    ],
};

[alexdima]

@benimadimorman I have tried your sample and here is the error I get in the developer tools:

After I fix publicPath to point to the dist folder, things start to work. In my case, the publicPath was /temp/webpack-issue-155/dist because I had a simple http server running a few folders up.

I also ran into another problem where the typescript worker wasn't getting generated by the plugin, despite the javascript language being used. The final config that worked for me was:

• index.js:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript';
import 'monaco-editor/esm/vs/basic-languages/python/python';

monaco.editor.create(document.getElementById('duzenleyici'), {
    value: ``,
    language: 'javascript',
    theme: 'vs-dark',
    wordWrap: true,
    automaticLayout: true,
});

• webpack.config:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'monaco.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.ttf$/,
                use: ['file-loader'],
            },
        ],
    },
    plugins: [
        new MonacoWebpackPlugin({
            languages: ['javascript', 'python', 'typescript'],
            features: ['find', 'bracketMatching', 'comment', 'folding', 'suggest', 'contextmenu', 'coreCommands', 'rename', 'wordHighlighter', 'codeAction', 'clipboard', 'linesOperations', 'gotoError', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations'],
            globalAPI: true,
            publicPath: '/temp/webpack-issue-155/dist/',
        }),
    ],
};

• package.json:

{
  "name": "webpack-issue-155",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "monaco-editor": "^0.27.0",
    "monaco-editor-webpack-plugin": "^4.1.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  }
}

• /dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="duzenleyici" style="width:800px;height:600px;border:1px solid #ccc"></div>
    <script type="text/javascript" src="monaco.js"></script>
</body>
</html>