highlightjs / highlightjs/highlight.js

Proper ES6 module support

Open
#4,100 2 comments 1 reaction 0 assignees View on GitHub
enhancement parser version-12
Dominant language
JavaScript
Stars
25k
Forks
3.8k
Avg merge
11h 35m
Merged PRs (30d)
3

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`](https://github.com/highlightjs/highlight.js?#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`:
```json
{
"dependencies": {
"highlight.js": "^11.10.0"
},
"type": "module"
}
```

`index.html`:
```html

<span>Hello World!</span>

```

`script.js`:
```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(
'Hello World!',
{ 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:
```html
<span>Hello World!</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`:
```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(
'Hello World!',
{ 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.js` package instead of `@highlightjs/cdn-assets`. Following code should work:
```js
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**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.