Menu
I have a NextJs app (blog) and I'm using react-quill as a rich text-editor in it. I'm using a Next custom 'app' feature where my UserProvider comp is wrapping the everything so i can have global access to certain things. My next/head comp is also there.
Been reading the docs on Quill -Syntax and Highlight.Js on usage but for the life of me keep getting 'Error: nextjs Syntax module requires highlight.js' what am I missing here? This is how my app component look:
_app.js:
function MyApp({ Component, pageProps }) {
return (
<UserProvider>
<Head>
<link rel='stylesheet' href='/css/styles.css' />
</Head>
<Nav />
<ToastContainer
position='top-center'
autoClose={2000}
pauseOnFocusLoss={false}
pauseOnHover={false}
theme='dark'
transition={Zoom}
/>
<Component {...pageProps} />
</UserProvider>
);
}
Things I tried:
Any help here? I have my Quill module customized so it includes ['code-block'] therefore I am already able to have code snippets but they are white font/black background only. This is my custom module for quill (syntax:true is commented out so far for obvs reasons)
const customPostToolbar = {
// syntax: true,
toolbar: [
[{ header: [2, 3, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[
{ script: 'sub' },
{ script: 'super' },
{ list: 'ordered' },
{ list: 'bullet' },
{ indent: '-1' },
{ indent: '+1' },
],
['link', 'image'],
['code-block'],
],
};
Appreciate if anyone knows, this has been doing my head all of yesterday 😅
694
asked Nov 20 '25 12:11
We can add highlight to window on client side, so Solution is:
import hljs from "highlight.js";
const ReactQuill = dynamic(
() => {
hljs.configure({ // optionally configure hljs
languages: ['javascript', 'php', 'go']
})
// @ts-ignore
window.hljs = hljs
return import ("react-quill")
}, {
ssr: false,
loading: () => <p>Loading</p>
})
const modules = {
syntax: true,
// ...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With