🐛 Refractor doesn't seem to be imported in Production
babur001 opened this issue · comments
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"
}
Hi there! Seems to work fine: https://codesandbox.io/s/using-craco-forked-c6wsg?file=/src/App.js.
- Using
toHtml
anddangerouslySetInnerHTML
defeats the purpose ofrefractor
— the whole reason to userefractor
is so you don’t need to dodangerouslySetInnerHTML
- 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
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
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
It works!
Thanks, God bless you.
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?