How to use react-mathquill with Next.js?

Question

I am trying to use react-mathquill in the project but am getting this error when I reload the page:

ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
webpack:/node_modules/@edtr-io/mathquill/build/mathquill.js (4:1)
Object../node_modules/@edtr-io/mathquill/build/mathquill.js
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (105:1)
__webpack_require__
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (226:42)
eval
webpack:/src/mathquill-loader.js (6:17)
Module../src/mathquill-loader.js
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (62:1)
__webpack_require__
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (226:42)
eval
webpack:/src/EditableMathField.js (9:75)
Module../src/EditableMathField.js
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (29:1)
__webpack_require__
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (226:42)
eval
webpack:/src/index.js (19:25)
Module../src/index.js
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (51:1)
__webpack_require__
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (226:42)
<unknown>
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (278:37)
<unknown>
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (281:12)
webpackUniversalModuleDefinition
file:///path-to-project/node_modules/react-mathquill/dist/react-mathquill.js (11:20)

Added dynamic import with removed ssr but it didn't help at all:

const EditableMathField = dynamic(
    () => import("react-mathquill").then((mod) => mod.EditableMathField),
    { ssr: false },
);
const StaticMathField = dynamic(
    () => import("react-mathquill").then((mod) => mod.StaticMathField),
    { ssr: false },
);

Also tried dynamic import of the component where I use react-mathquill and its dynamic export => didn't help. Also tried to update Next.js to the v15.0.4. In that case, I got the error not only if I reloaded the page but also if I went to it via routing.

What else can I do to solve this issue?

Package versions:

"next": "13.5.6",
"react": "^18.2.0",
"react-mathquill": "^1.0.3",

Answer 1

I figured it out. There was a problem with addStyles() function of this lib that couldn't be imported with dynamic and put this function into the useEffect() wasn't enough.

So you need to import addStyles() in the useEffect() this way:

useEffect(() => {
    (async function applyMathquillStyles() {
        const { addStyles } = await import("react-mathquill");
        addStyles();
    })();
}, []);