Instancing Monaco Editor is just 5 by 5 Pixels even with `automaticLayout: true` [Workaround] [Closed]

1. Try to reproduce in VS Code and file issue directly at: Impossible

2. Otherwise, provide steps that reproduce the problem in VS Code web at:

• Install Monaco Editor npm install monaco-editor
• Install Monaco Editor WebPack Plugin npm install monaco-editor-webpack-plugin
• Add to webpack.mix.js

const mix = require('laravel-mix');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig(webpack => {
        return {
            plugins: [
                new MonacoWebpackPlugin({
                    // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
                    languages: ['javascript', 'python'],
                    // Features doesn't work ( https://github.com/microsoft/monaco-editor-webpack-plugin/issues/109 )
                    features: [
                        'accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction',
                        'codelens', 'colorDetector', 'comment', 'contextmenu', 'coreCommands','cursorUndo',
                        'dnd', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol',
                        'hover', 'iPadShowKeyboard', 'inPlaceReplace', 'inspectTokens', 'linesOperations',
                        'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickOutline', 'referenceSearch',
                        'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode',
                        'transpose', 'wordHighlighter', 'wordOperations', 'wordPartOperations']
                }),
                // new BundleAnalyzerPlugin()
            ]
        };
    });

• Add to Editor.vue

<template>
    <div id="monaco-editor-container"></div>
</template>

<script>
    import * as monaco from 'monaco-editor';

    export default {
        mounted() {
            monaco.editor.create(document.getElementById("monaco-editor-container"), {
                value: "function hello() {\n\talert('Hello world!');\n}",
                language: "python",
                automaticLayout: true
            });
        }
    }

</script>

<style>

</style>

• Register Component:

...
Vue.component('vue-monaco-editor',                  require('./components/Monaco/Editor.vue').default);
...

• Use Component:

<vue-monaco-editor></vue-monaco-editor>

1. Otherwise, provide steps that reproduce the problem at the Monaco Editor homepage None

2. Otherwise, provide a Playground code snippet None

3. Otherwise, provide a self-contained git repository / HTML page None

monaco-editor version: npm -v monaco-editor 6.13.4 Browser: Chrome OS: Winows 10 Playground code that reproduces the issue: None

[dschiller]

Thanks David. I tried that but in fact that the Editor is inside a tab-pane from Bootstrap that doesn’t work. Also the automaticLayout: true Option doesn’t work and is expensive in general. I could remove my Workaround and fix it by using a ResizeObserver:

[luminaxster]

Starting release 0.21, Monaco will do exactly that =), or fallback to polling if not supported.