Overwrites autoloader path

[oddegen]

Information:

• Prism version: 1.29.0
• Plugins: 'autoloader'
• Environment: Browser, Nextjs

Description
Overwrites autoloader path to the default one, although I've set the new path

"use client";

import { Textarea } from "@/components/ui/textarea";
import { KeyboardEvent, useEffect, useRef } from "react";
import Prism from "prismjs";

export function Editor({ lang, value }: { lang: string; value: string }) {
  const PRISM_CDN = "https://cdn.jsdelivr.net/npm/[email protected]";

  useEffect(() => {
    Prism.plugins.autoloader.languages_path = `${PRISM_CDN}/components/`;
  }, []);

  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const codeRef = useRef<HTMLElement | null>(null);
  const preRef = useRef<HTMLPreElement | null>(null);

  function handleInput(value: string) {
    if (!codeRef || !codeRef.current) return;

    if (value[value.length - 1] == "\n") {
      value += " ";
    }

    codeRef.current.innerHTML = Prism.highlight(
      value,
      Prism.languages[lang],
      lang
    );

    handleScroll();
  }

  return (
    <div className="h-full w-full">
      <Textarea
        className="h-full w-full p-8 sm:p-14 border-none rounded-none focus-visible:ring-0 focus-visible:ring-offset-0 z-10 text-transparent bg-transparent caret-black dark:caret-white resize-none editing"
        ref={textareaRef}
        onInput={(e) => handleInput(e.target.value)}
        onScroll={handleScroll}
        onKeyDown={(e) => handleKeyDown(e)}
        placeholder="Start typing..."
        spellCheck={false}
      ></Textarea>

      <pre
        aria-hidden="true"
        className={`h-full w-full !p-8 sm:!p-14 z-0 highlighting language-${lang} !bg-transparent`}
        ref={preRef}
        data-autoloader-path={`${PRISM_CDN}/components/`}
      >
        <code
          ref={codeRef}
          className={`language-${lang} !bg-transparent`}
        ></code>
      </pre>
    </div>
  );
}

.babelrc

{
  "presets": ["next/babel"],
    "plugins": [
      [
        "prismjs",
        {
          "languages": [
            "javascript",
            "css",
            "markup"
          ],
          "plugins": [
            "autoloader"
          ],
          "theme": "tomorrow",
          "css": true
        }
      ]
    ]
}

[mAAdhaTTah]

The useEffect is probably too late relative to the autoloading being run by Prism.

[oddegen]

The useEffect is probably too late relative to the autoloading being run by Prism.

But the autoloader object is undefined on the server, so I can't set the path