Browser blocking lowlight library when using CodeBlockLowLight

[bjornhansen]

When I follow the example on the CodeBlockLowlight docs page I get a browser error.

My code is:

import { Editor, Mark } from 'https://cdn.skypack.dev/@tiptap/core?min';
import StarterKit from 'https://cdn.skypack.dev/@tiptap/starter-kit?min';
import CodeBlockLowLight from 'https://cdn.skypack.dev/@tiptap/extension-code-block-lowlight?min';
import lowlight from 'https://cdn.skypack.dev/lowlight@2?min';

When loading the page on Chrome I get this message for all 35 of the default lowlight languages:

GET https://cdn.skypack.dev/-/highlight.js@v11.3.1-CgfbK7fQpLT47Err2cw7/dist=es2019,mode=imports,min/optimized/highlight.js/lib/languages/css.js net::ERR_ABORTED 404

On Firefox it also fails, but it's more verbose and mentions CORS issues:

GET https://cdn.skypack.dev/-/highlight.js@v11.3.1-CgfbK7fQpLT47Err2cw7/dist=es2019,mode=imports,min/optimized/highlight.js/lib/css.js CORS Failed

Loading module from “https://cdn.skypack.dev/-/highlight.js@v11.3.1-CgfbK7fQpLT47Err2cw7/dist=es2019,mode=imports,min/optimized/highlight.js/lib/languages/css.js” was blocked because of a disallowed MIME type (“text/plain”).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.skypack.dev/-/highlight.js@v11.3.1-CgfbK7fQpLT47Err2cw7/dist=es2019,mode=imports,min/optimized/highlight.js/lib/languages/css.js. (Reason: CORS request did not succeed). Status code: (null).

Has anyone else experienced this issue? How might I go about debugging it? It's hard to believe all those files are missing from the CDN.

[cadars]

I think codeBlockLowlight doesn’t officially support lowlight v2.x, so maybe it's about this? I’m not familiar with importing the libraries via a CDN, but see this issue for alternative ways to import the last version.

[bjornhansen]

Changing the import from 'https://cdn.skypack.dev/lowlight@2?min' to 'https://cdn.skypack.dev/lowlight@1?min' did resolve this. Thanks!

I wasn't able to get it working with lowlight v2.

[cadars]

You could try this I think?

import { lowlight } from "https://cdn.skypack.dev/pin/lowlight@v2.4.1-itgz3TRIRWGATkJr3g5c/mode=raw,min/all.js";