Next.js Discord

Discord Forum

NextJS and using npm modules libraries

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Avatar
Sun bearOP
I'm facing an issue that I am hoping I can get some assistance to resolve 2 related errors/issues. I am using a 3rd party module installed as part of my NextJS app:

$ npx create-next-app@latest .
$ npm install @smile_identity/smart-camera-web

I add the following to the top of my page.tsx:
'use client';
import Image from 'next/image';
import '@smile_identity/smart-camera-web';

When I execute 'npm run dev' an error is returned:
○ Compiling / ... ✓ Compiled / in 726ms (525 modules) ** ⨯ ReferenceError: HTMLElement is not defined** at _webpack_require_ (/path/sample/.next/server/webpack-runtime.js:33:42) at eval (./app/page.tsx:10:90) at (ssr)/./app/page.tsx (/path/sample/.next/server/app/page.js:162:1) at Object.__webpack_require__ [as require] (/path/sample/.next/server/webpack-runtime.js:33:42) at JSON.parse (<anonymous>) digest: "3480905537" GET / 500 in 938ms ✓ Compiled in 164ms (257 modules)

There are no type definitions for this module, so I have created something basic in a d.ts file for the app:

[scw.d.ts]
declare module '@smile_identity/smart-camera-web' { import { ReactNode } from "react"; export function SmartCameraWeb(): ReactNode; }
[/scw.d.ts]

Any ideas on getting this to work? I suspect that I either need to expand the d.ts or find a way to make the smart-camera-web or better yet the SmartCameraWeb component a recognised JSX.IntrinsicElement.

I am relatively new to NextJS and am a little out of my depth here and appreciate the guidance. Thank you.

0 Replies