Monaco Editor - use case for customizing webpack configuration

[andreisoare]

I read a lot of threads where you explain why you don't provide a way to customize the internal Webpack config. It makes perfect sense.

I have one use case which I don't know how to solve without ejecting: I want to include Monaco Editor in my app and this medium post is the only way that I found to do it.

This approach has been implemented in react-monaco-editor but it still requires users to

Add a Webpack plugin copy-webpack-plugin to your webpack.config.js

Do you know any other approach that would not require me to eject? Also how would you solve for this use case in CRA?

[viankakrisna]

You can put files in node_modules/monaco-editor/min/vs to public/show/vs and see if it's working.

[andreisoare]

That does work, great idea! However, it does require me to keep my 3rd party dependency in git rather than package.json.

[viankakrisna]

Yeah, i think you can do postinstall hook to copy the relevant files to keep it updated. Also, you can gitignore the show folder in public folder, it will be copied to build folder regardless you ignore it or not when you run npm run build.

But that adds another complexity in your build. I'll go with checking that deps to git :)

[andreisoare]

Alright, well my problem is solved thanks to you, but I still think CRA could solve this use case in a more elegant way. If there is enough demand for it.

[Timer]

Unfortunately, this has been a thoroughly discussed topic and we are not going to allow modifying webpack configuration anytime soon.

For now, I suggest you modify your index.html, adding or finding another workaround:

<script src="monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
    });
</script>

[andreisoare]

That's fair, thank you for the help! Just doing my part, complaining, hoping that if enough people have this problem you will reconsider. Or maybe people will stop using archaic build tools in their libraries :)