"Error: 'Super expression must either be null or a function' in Typist.js"

[Chen-Steve]

I encountered an error in the react-typist package while using it in my Next.js application. The error message I received is as follows: Error: Super expression must either be null or a function, not undefined

(I'm also new to react-typist sorry if this a dumb issue)

Package Version: react-typist version: 2.0.5 Node.js version: 18.18.0 React version: 18.2.0

Operating System: Windows 11 Home version 10.0.22621 Build 22621

PS C:\Users\Asus\Desktop\portfolio> npm run dev

portfolio@0.1.0 dev next dev

▲ Next.js 13.5.4

• Local: http://localhost:3000

  ✓ Ready in 4.4s ○ Compiling /page ... ✓ Compiled /page in 4.8s (3945 modules) TypeError: Super expression must either be null or a function, not undefined at _inherits (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:1090:23) at eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:1103:13) at Object.eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:1186:10) at nested_webpack_require_183 (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:16:36) at Object.eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:67:23) at nested_webpack_require_183 (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:16:36) at eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:29:21) at eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:30:11) at (rsc)/./node_modules/react-typist/dist/Typist.js (C:\Users\Asus\Desktop\portfolio.next\server\vendor-chunks\react-typist.js:30:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (webpack-internal:///(rsc)/./src/components/Intro.tsx:15:70) at (rsc)/./src/components/Intro.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:435:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (webpack-internal:///(rsc)/./src/app/page.tsx:12:75) at (rsc)/./src/app/page.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:351:1) at Function.webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at runNextTicks (node:internal/process/taskqueues:60:5) at listOnTimeout (node:internal/timers:538:9) at process.processTimers (node:internal/timers:512:7) at async e (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:405134) at async eJ (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:409224) at async eG (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:409699) at async eG (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:409830) at async eX (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:413242) at async C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:413716 { digest: '1553402871' } ⨯ node_modules\react-typist\dist\Typist.js (1233:113) @ _inherits ⨯ TypeError: Super expression must either be null or a function, not undefined at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (./src/components/Intro.tsx:15:70) at (rsc)/./src/components/Intro.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:435:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (./src/app/page.tsx:12:75) at (rsc)/./src/app/page.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:351:1) at Function.webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at async Promise.all (index 0) null ⨯ node_modules\react-typist\dist\Typist.js (1233:113) @ _inherits ⨯ TypeError: Super expression must either be null or a function, not undefined at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (./src/components/Intro.tsx:15:70) at (rsc)/./src/components/Intro.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:435:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (./src/app/page.tsx:12:75) at (rsc)/./src/app/page.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:351:1) at Function.webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at async Promise.all (index 0) digest: "2598948466" null ⨯ node_modules\react-typist\dist\Typist.js (1233:113) @ _inherits ⨯ TypeError: Super expression must either be null or a function, not undefined at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (./src/components/Intro.tsx:15:70) at (rsc)/./src/components/Intro.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:435:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (./src/app/page.tsx:12:75) at (rsc)/./src/app/page.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:351:1) at Function.webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) null ⨯ node_modules\react-typist\dist\Typist.js (1233:113) @ _inherits ⨯ TypeError: Super expression must either be null or a function, not undefined at _inherits (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:1090:23) at eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:1103:13) at Object.eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:1186:10) at nested_webpack_require_183 (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:16:36) at Object.eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:67:23) at nested_webpack_require_183 (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:16:36) at eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:29:21) at eval (webpack-internal:///(rsc)/./node_modules/react-typist/dist/Typist.js:30:11) at (rsc)/./node_modules/react-typist/dist/Typist.js (C:\Users\Asus\Desktop\portfolio.next\server\vendor-chunks\react-typist.js:30:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (webpack-internal:///(rsc)/./src/components/Intro.tsx:15:70) at (rsc)/./src/components/Intro.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:435:1) at webpack_require (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at eval (webpack-internal:///(rsc)/./src/app/page.tsx:12:75) at (rsc)/./src/app/page.tsx (C:\Users\Asus\Desktop\portfolio.next\server\app\page.js:351:1) at Function.__webpack_require__ (C:\Users\Asus\Desktop\portfolio.next\server\webpack-runtime.js:33:43) at runNextTicks (node:internal/process/taskqueues:60:5) at listOnTimeout (node:internal/timers:538:9) at process.processTimers (node:internal/timers:512:7) at async e (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:405134) at async eJ (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:409224) at async eG (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:409699) at async eG (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:409830) at async eX (C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:413242) at async C:\Users\Asus\Desktop\portfolio\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:413716 { digest: '1553402871', page: '/' } null ○ Compiling /_error ... ✓ Compiled /_error in 3.8s (4090 modules)

my package.json file: { "name": "portfolio", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", "@mui/material": "^5.0.0", "@types/react-typist": "^2.0.5", "bootstrap": "^5.3.2", "next": "13.5.4", "particles.js": "^2.0.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-bootstrap": "^2.9.0", "react-dom": "^18.2.0", "react-intersection-observer": "^9.5.2", "react-typist": "^2.0.5", "rsuite": "^5.40.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18.2.28", "@types/react-bootstrap": "^0.32.34", "@types/react-dom": "^18", "autoprefixer": "^10", "eslint": "^8", "eslint-config-next": "13.5.4", "postcss": "^8", "tailwindcss": "^3.3.3", "typescript": "^5.2.2" } }

[eysenshi]

try add 'use client' at the top of the file you use Typist.