Autocompletion in Javascript nested in HTML

Following the official autocomplete example I managed to get custom autocomplete working in HTML

However, when I tried the same approach inside script tags, it didn’t work, is that because it’s a nested mode? Any way to get it to fire?

import { javascriptLanguage } from '@codemirror/lang-javascript';
import { htmlLanguage } from '@codemirror/lang-html';

...
htmlLanguage.data.of({
    autocomplete: completeHtml,
}),
html(),
javascriptLanguage.data.of({
    autocomplete: completeJavascript,
}),
javascript({ jsx: false }), // I tried removing this too
...

This should work (and works for me). Though the last call to javascript doesn’t do anything (only the highest-precedence top-level language is used). html() will automatically use javascriptLanguage for script content, so autocompletion there will consult the language data for javascriptLanguage.

One thing that you might want to check is whether you have multiple copies of lang-javascript in your node_modules (npm ls --all). Language data works by identity, so if the javascriptLanguage package you import here is different from the one lang-html internally imports you might get a failure like this.

aha! you’re absolutely right, I have one in node_modules and one under @codemirror/lang-html, I changed my import to this and now my callback fires!

import { javascriptLanguage } from '@codemirror/lang-html/node_modules/@codemirror/lang-javascript';