harunurhan / react-latex-next

Render LaTeX in React apps
https://react-latex.netlify.app
88 stars 17 forks source link

Cannot import lib #46

Closed TachoMex closed 10 months ago

TachoMex commented 1 year ago

Hello! I think something might got broken with new versions of node.

I am trying to integrate this lib with next application and just importing the lib makes it crash. I created a new next app with npx create-next-app, added dependency npm i react-latex-next --save and edited default page.js to this:


import 'katex/dist/katex.min.css';
import Latex from 'react-latex-next'

export default function Home() {
  return (
   <div>
    Hello World!
   </div>
  );
}

When I start the server I get this error on console:

- wait compiling /_error (client and server)...
- error Failed to generate static paths for /:
TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (webpack-internal:///(rsc)/./node_modules/react-latex-next/dist/index.js:48:12)
    at __extends (webpack-internal:///(rsc)/./node_modules/react-latex-next/dist/index.js:51:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-latex-next/dist/index.js:29690:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-latex-next/dist/index.js:29730:2)
    at (rsc)/./node_modules/react-latex-next/dist/index.js (/server/.next/server/app/page.js:1822:1)
    at __webpack_require__ (/server/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.js:10:74)
    at (rsc)/./app/page.js (/server/.next/server/app/page.js:1096:1)
    at Function.__webpack_require__ (/server/.next/server/webpack-runtime.js:33:42) {
  type: 'TypeError'
}

Notice that if I remove the import the error disappears.

Package json

{
  "name": "latex-text",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-latex-next": "^2.2.0",
    "tailwindcss": "3.3.3"
  }
}

Node version

v20.6.1

$ npm --version
10.1.0

Please let me know if I can help :smile:

TachoMex commented 1 year ago

I was able to go futher and make a workaround.

The issue is that my project is a static server and this lib requires component to 'use client'. So Adding that directive fixed the problem. Maybe it would be helpfull to have that kind of error instead of a js pure error that could make newbies like me to think the lib is not working.