🐛 Refractor doesn't seem to be imported in Production

[Babur]

Node -v 14.17.4
React -v 17

I am using @craco/craco to configure webpack, so after I have generated an app with npm run build and visiting the build app with serve -s build shows an empty page. On the console it says Error: Unknown language: html is not registered, however I have imported the refractor as import { refractor } from "refractor/lib/common.js" and also tried in this way import { refractor } from "refractor";, both ways does not seem to work.

import { useEffect, useState } from "react";
import { refractor } from "refractor";
import { toHtml } from "hast-util-to-html";

export default function Code() {
  const [code, setCode] = useState(``);

  useEffect(() => {
    try {
      setCode(
        toHtml(refractor.highlight("<h1>Assalamu Alaykum!</h1>", "html"))
      );
    } catch (error) {
      console.log(error);
    }
  }, []);

  return (
    <div className="w-full relative group mb-7">
      <pre className="language-css text-xl | relative">
        <div
          dangerouslySetInnerHTML={{
            __html: code,
          }}
        ></div>
      </pre>
    </div>
  );
}

Scripts in package.json:

"scripts": {
    "start": "TAILWIND_MODE=watch craco start",
    "build": "CI=false craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
}

[Titus]

Hi there! Seems to work fine: https://codesandbox.io/s/using-craco-forked-c6wsg?file=/src/App.js.

• Using toHtml and dangerouslySetInnerHTML defeats the purpose of refractor — the whole reason to use refractor is so you don’t need to do dangerouslySetInnerHTML
• Update refractor to latest, there was a small issue patched in the last release
• Perhaps it’s something with the other tools you’re using

[Babur]

In development yes it does work, but whenever i switch to production it says Error: Unknown language: "html" is not registered.

To create a mock go here and try visiting the production not dev

[Titus]

Please follow my second suggestion. Your packag lock Says 4.1.0 and thus was most likely fixed on 4.1.1: https://github.com/wooorm/refractor/releases/tag/4.1.1

[Babur]

It works!

Thanks, God bless you.

[Babur]

Also, Using toHtml and dangerouslySetInnerHTML defeats the purpose of refractor — the whole reason to use refractor is so you don’t need to do dangerouslySetInnerHTML how can i render it in react? 👀 Can you show the way you handle it?

[Titus]

• https://github.com/rehypejs/rehype-react (see also source)
• https://github.com/rexxars/react-refractor