# Elegant way to support a ton of languages

**URL:** https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600
**Category:** v6
**Created:** [October 5, 2021, 8:25am UTC](https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600 "2021-10-05T08:25:39Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![CodeMyst](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/codemyst/32/1536_2.png) [@CodeMyst](https://discuss.codemirror.net/u/CodeMyst)
#### Post date: [October 5, 2021, 8:25am UTC](https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600/1 "2021-10-05T08:25:39Z")

</div>

I am working on a pastebin-like website, and trying to switch to using CodeMirror v6, the issue is supporting all of the languages that the old CodeMirror supported.

The website is paste.myst.rs, and there you can see the dropdown with all of the supported languages, and the way I did that was download all the languages, and dynamically import the proper language.

```auto
import(`../libs/codemirror/${mode}/${mode}.js`).then(() =>
    {
        editor.setOption("mode", mime);
    });

```

In v6, the languages are npm packages, and because I’m using rollup I can’t dynamically import npm modules. So for now I have this:

```auto
import { javascript } from "@codemirror/lang-javascript";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";
import { markdown } from "@codemirror/lang-markdown";
import { json } from "@codemirror/lang-json";
import { python } from "@codemirror/lang-python";
import { xml } from "@codemirror/lang-xml";
import { java } from "@codemirror/lang-java";
import { rust } from "@codemirror/lang-rust";
import { cpp } from "@codemirror/lang-cpp";
import { sql } from "@codemirror/lang-sql";
import { php } from "@codemirror/lang-php";

const onLangSelected = async () => {
    let ls: LanguageSupport = undefined;

    switch (selectedLanguage[0]) {
        case "JavaScript": ls = javascript(); break;
        case "HTML": ls = html(); break;
        case "CSS": ls = css(); break;
        case "Markdown": ls = markdown(); break;
        case "JSON": ls = json(); break;
        case "Python": ls = python(); break;
        case "XML": ls = xml(); break;
        case "Java": ls = java(); break;
        case "Rust": ls = rust(); break;
        case "C++": ls = cpp(); break;
        case "SQL": ls = sql(); break;
        case "PHP": ls = php(); break;
    }

    editorView.dispatch({
        effects: language.reconfigure(ls)
    });
};

```

This looks pretty ugly, and this doesn’t even include the “legacy” languages. So I wonder if there’s some solution to handling literally every language CM can support.

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [October 5, 2021, 9:01am UTC](https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600/2 "2021-10-05T09:01:24Z")

</div>

Have you seen the [@codemirror/language-data](https://codemirror.net/6/docs/ref/#language-data) package?

---

<div class="post-metadata">

### Author: ![CodeMyst](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/codemyst/32/1536_2.png) [@CodeMyst](https://discuss.codemirror.net/u/CodeMyst)
#### Post date: [October 5, 2021, 9:09am UTC](https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600/3 "2021-10-05T09:09:18Z")

</div>

Oh… looks like that’s exactly what I would need, probably should be added to examples or something, pretty hard to find.

But just importing the package gives me an error:

```auto
[!] Error: UMD and IIFE output formats are not supported for code-splitting builds.
Error: UMD and IIFE output formats are not supported for code-splitting builds.
    at error (/home/codemyst/work/pastemyst/frontend/node_modules/rollup/dist/shared/rollup.js:5305:30)
    at validateOptionsForMultiChunkOutput (/home/codemyst/work/pastemyst/frontend/node_modules/rollup/dist/shared/rollup.js:12597:16)
    at Bundle.generate (/home/codemyst/work/pastemyst/frontend/node_modules/rollup/dist/shared/rollup.js:12436:17)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at handleGenerateWrite (/home/codemyst/work/pastemyst/frontend/node_modules/rollup/dist/shared/rollup.js:20306:23)
    at async Promise.all (index 0)
    at Task.run (/home/codemyst/work/pastemyst/frontend/node_modules/rollup/dist/shared/watch.js:756:32)
    at Watcher.run (/home/codemyst/work/pastemyst/frontend/node_modules/rollup/dist/shared/watch.js:683:13)

```

```auto

```

---

<div class="post-metadata">

### Author: ![CodeMyst](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/codemyst/32/1536_2.png) [@CodeMyst](https://discuss.codemirror.net/u/CodeMyst)
#### Post date: [October 5, 2021, 9:17am UTC](https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600/4 "2021-10-05T09:17:21Z")

</div>

I set `inlineDynamicImports` to `true` in the rollup config and it seems to work now.

---

<div class="post-metadata">

### Author: ![CodeMyst](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/codemyst/32/1536_2.png) [@CodeMyst](https://discuss.codemirror.net/u/CodeMyst)
#### Post date: [October 5, 2021, 9:25am UTC](https://discuss.codemirror.net/t/elegant-way-to-support-a-ton-of-languages/3600/5 "2021-10-05T09:25:28Z")

</div>

Thank you for the fast response, this is now working pretty great.
