esm/vs/base/browser/ui/codicons/codicon/codicon.css Unexpected character ' '

[guchengjie]

------webpack -v 5.10 ./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleParseError: Module parse failed: Unexpected character ' ' (1: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 (Source code omitted for this binary file)

------ codicon.css mncaco -v 0.22.3 /*---------------------------------------------------------------------------------------------

• Copyright (c) Microsoft Corporation. All rights reserved.
• Licensed under the MIT License. See License.txt in the project root for license information. --------------------------------------------------------------------------------------------/

@font-face { font-family: "codicon"; src: url(./codicon.ttf) format("truetype"); }

.codicon[class*='codicon-'] { font: normal normal normal 16px/1 codicon; display: inline-block; text-decoration: none; text-rendering: auto; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none; -ms-user-select: none; }

/ icon rules are dynamically created in codiconStyles /

[alexdima]

@guchengjie It looks like mini-css-extract-plugin is not able to parse the @font-face declaration in the CSS? I think that is a problem with that particular webpack loader or perhaps they don't support CSS with @font-face declarations by design? Here is a self-contained example of webpack loading -- https://github.com/microsoft/monaco-editor-samples/tree/main/browser-esm-webpack-monaco-plugin

[guchengjie]

This project also introduces iconfont, which does not have the same problem

@font-face {font-family: "iconBusiness"; src: url('iconfont.eot?t=1611197151215'); / IE9 / src: url('iconfont.eot?t=1611197151215#iefix') format('embedded-opentype'), / IE6-IE8 / url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABYwAAsAAAAAKAgAABX........=') format('woff2'), url('iconfont.woff?t=1611197151215') format('woff'), url('iconfont.ttf?t=1611197151215') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+ / url('iconfont.svg?t=1611197151215#iconBusiness') format('svg'); / iOS 4.1- / }

.iconBusiness { font-family: "iconBusiness" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-anquanjiance:before { content: "\e6a9"; }

[alexdima]

I'm sorry, I really don't know what the problem is.

[danielcaldas]

Seeing the same error. Here are the details:

[dev:server] ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css
[dev:server] Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[dev:server] ModuleParseError: Module parse failed: Unexpected character '' (1:0)
[dev:server] 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
[dev:server] (Source code omitted for this binary file)

• webpack: 5.37.1
• css-loader: 5.2.4
• mini-css-extract-plugin: 1.6.0

Here's the relevant portion of my webpack configuration:

{
  test: /\.s?css$/,
  use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'postcss-loader',
      {
        loader: 'sass-loader',
        options: {
          implementation: require('sass'),
          sassOptions: {
            includePaths: [path.join(__dirname, 'src/theme'), './node_modules'],
          },
        },
      },
  ],
},

Any chance you had a resolution for this @guchengjie? Or maybe @alexdima, any insights you could provide?

And my integration in a Svelte component, just like the one provided here.

<script>
  import { onMount } from 'svelte';
  import * as monaco from 'monaco-editor';

  window.MonacoEnvironment = {
    getWorkerUrl: function (moduleId, label) {
      if (label === 'json') {
        return './json.worker.bundle.js';
      }
      if (label === 'css' || label === 'scss' || label === 'less') {
        return './css.worker.bundle.js';
      }
      if (label === 'html' || label === 'handlebars' || label === 'razor') {
        return './html.worker.bundle.js';
      }
      if (label === 'typescript' || label === 'javascript') {
        return './ts.worker.bundle.js';
      }
      return './editor.worker.bundle.js';
    },
  };

  onMount(() => {
    try {
      monaco.editor.create(document.getElementById('container'), {
        value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
        language: 'javascript',
      });
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        // eslint-disable-next-line no-console
        console.error('TWEAK :: ', error);
      }
    }
  });
</script>

<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>