"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

[email protected] 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/task_queues: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/task_queues: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.