Monaco editor problem

[danielpaz6]

Hi,

I just saw a new example from yesterday about Monaco Editor:

https://github.com/zeit/next.js/tree/canary/examples/with-monaco-editor

but when I try to install that, it doesn't work for me, saying:

[ error ] ./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
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

And I wondered if anyone else gets this error too.

[jamesmosier]

I was also unable to run that example as is.

As a workaround I had to install url-loader and change the next.config.js to:

const withCSS = require('@zeit/next-css');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = withCSS({
  webpack: function (config) {
    config.plugins.push(
      new MonacoWebpackPlugin({
        // Add languages as needed...
        languages: ['javascript', 'typescript'],
        filename: 'static/[name].worker.js',
      })
    );

    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]',
        },
      },
    });
    return config;
  },
});

Still looking into why 🤔

[danielpaz6]

Would you mind repost it here too: #13117

Let's concentrate everything related to monaco in that issue.

By the way, you installed url-loader via npm install --save url-loader and then edited the next.config.js file? Because it pops me errors about not recognizing the web-packer.

Edit: just replacing the next.config.js to yours fixed the problem.

Edit: after replacing next.config.js it says:

found 9 vulnerabilities (7 low, 1 moderate, 1 high)

So npm audit fix is required.