Monaco-editor Not allowed to load local resource: Codicon.ttf

When trying to load the Monaco editor via the Webpack plugin I get the following error: Not allowed to load local resource: file:///C:/{***}/node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf

In my global.scss I have:

@font-face {
font-display: block;
font-family: codicon;
src: url('/assets/resources/codicon.ttf') format('truetype');
}


So it will load correctly but I noticed in the editor.main.css there is a line with: @font-face{font-display:block;font-family:codicon;src:url(../base/browser/ui/codicons/codicon/codicon.ttf).

My current webpack config:

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

module.exports = {
plugins: [
new MonacoWebpackPlugin({
customLanguages: [
{
label: 'yaml',
entry: 'monaco-yaml',
worker: {
id: 'monaco-yaml/yamlWorker',
entry: 'monaco-yaml/yaml.worker',
},
},
],
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [path.resolve(__dirname, '../../node_modules/monaco-editor')],
},
{
test: /\.ttf$/,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[name][ext]',
},
},
],
},
stats: {
warningsFilter: /Sass @import rules are deprecated/,
},
};



And my build executor (It is an angular application) is: "@nx/angular:webpack-browser".

It is probably an oversight somewhere I've made but I can't to get a grip on it why it is loading via a local path.

Continue reading...