Proper ES6 module support #4100
Description
Is your request related to a specific problem you're having?
I am having problem importing ES6 modules from highlight.js. Although the README mentions about ES6 Modules / import, it does not work in Browser.
I have installed highlight.js using npm install highlight.js. The following are the contents of files in project:
package.json:
{
"dependencies": {
"highlight.js": "^11.10.0"
},
"type": "module"
}index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./node_modules/highlight.js/styles/default.min.css">
</head>
<body>
<pre><code class="language-html"><span>Hello World!</span></code></pre>
<script src="script.js" type="module"></script>
</body>
</html>script.js:
import hljs from "./node_modules/highlight.js/lib/core.js";
import xml from './node_modules/highlight.js/lib/languages/xml.js';
hljs.registerLanguage('xml', xml);
const highlightedCode = hljs.highlight(
'<span>Hello World!</span>',
{ language: 'xml' }
).value;
console.log(highlightedCode);
if (typeof window === 'object') { // check if currently running in browser
hljs.highlightAll();
}All the above three files are located inside same directory.
When opening the index.html in Firefox, there is error with following message in console:
Uncaught SyntaxError: The requested module 'http://localhost/node_modules/highlight.js/lib/core.js' doesn't provide an export named: 'default'
However, running node script.js works fine with following output:
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>Hello World!<span class="hljs-tag"></<span class="hljs-name">span</span>></span>It seems both the core.js and xml.js are not ES6 modules at all despite what the documentation says. They are just CommonJS modules. They seem to work in NodeJS despite being imported from ES6 modules.
I tried CDN links and they worked. But I needed local copy of those files. I downloaded those files from CDN and used that. But later, after going through the documentation thoroughly, I found that there is another package @highlightjs/cdn-assets that provide those files. After installing @highlightjs/cdn-assets, I replaced import in script.js with the following code and everything works now:
script.js:
import hljs from './node_modules/@highlightjs/cdn-assets/es/core.js';
import xml from './node_modules/@highlightjs/cdn-assets/es/languages/xml.min.js';
hljs.registerLanguage('xml', xml);
const highlightedCode = hljs.highlight(
'<span>Hello World!</span>',
{ language: 'xml' }
).value;
console.log(highlightedCode);
hljs.highlightAll();Although this works, the problem is that @highlightjs/cdn-assets contains generated code, not the original source code. For example, all the language files inside ./node_modules/@highlightjs/cdn-assets/es/languages/ are minified files.
The solution you'd prefer / feature you'd like to see added...
- I would like to be able to import ES6 modules directly from
hightlight.jspackage instead of@highlightjs/cdn-assets. Following code should work:import hljs from "./node_modules/highlight.js/lib/core.js"; import xml from './node_modules/highlight.js/lib/languages/xml.js';
- The imported file should be original source code, not generated code.
I think any JS library meant for browser should be developed using ES6 modules. It is better to drop support for CommonJS as ES6 module is already supported in Node.
Additional context...
highlight.js version: 11.10.0