Nexjts 14 ENOENT: no such file or directory

[LilliAlessio]

Hi, today i just install the library try to add it to a server component (page.tsx) but i had this erro

NOENT: no such file or directory, open '/Users/project/flexymob/frontend/.next/server/vendor-chunks/../regexes/client/hints/apps.yml'
    at Object.openSync (node:fs:581:18)
    at Object.readFileSync (node:fs:457:35)
    at Object.loadYMLFile (webpack-internal:///(rsc)/./node_modules/node-device-detector/parser/helper.js:170:25)
    at AppHints.loadYMLFile (webpack-internal:///(rsc)/./node_modules/node-device-detector/parser/abstract-parser.js:47:23)
    at AppHints.loadCollection (webpack-internal:///(rsc)/./node_modules/node-device-detector/parser/abstract-parser.js:39:52)
    at new AppHints (webpack-internal:///(rsc)/./node_modules/node-device-detector/parser/client/hints/app-hints.js:7:14)
    at eval (webpack-internal:///(rsc)/./node_modules/node-device-detector/parser/client/mobile-app.js:5:18)
    at (rsc)/./node_modules/node-device-detector/parser/client/mobile-app.js (/Users/project/flexymob/frontend/.next/server/vendor-chunks/node-device-detector.js:180:1)
    at __webpack_require__ (/Users/roject/flexymob/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/node-device-detector/index.js:14:25) {
  type: 'Error',
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/project/flexymob/frontend/.next/server/vendor-chunks/../regexes/client/hints/apps.yml',
  page: '/it'
}

I tried to use it in a client component

./node_modules/node-device-detector/parser/helper.js:2:11
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/node-device-detector/index.js
./src/modules/landing/pages/LandingPage.tsx

[sanchezzzhak]

Hi. the library is designed to work on the server-side
1] it is inefficient to use on the browser.
2] not all browsers support the full syntax of regular expressions, such as safari.

[LilliAlessio]

I use Chrome and I was doing that server side, I add the "use server" too, nothing change

[LilliAlessio]

the first error is the one in server-component

[sanchezzzhak]

Judging by the errors, you want to call device-detector in the template, this will not work.
You need to make an api.endpoint

src/app/api/t.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import DeviceDetector, {DetectResult} from 'node-device-detector'
import ClientHints from 'node-device-detector/client-hints'

const clientHints = new ClientHints();
const detector = new DeviceDetector({
    deviceTrusted: true,
    deviceIndexes: true,
    clientIndexes: true,
    deviceAliasCode: false,
});

type ResponseData = {
    result: DetectResult
}
// post route
export default function handler(
    req: NextApiRequest,
    res: NextApiResponse<ResponseData>
) {
    const userAgent = '' + res.getHeader('user-agent');
    const headers: { [key: string]: string; } = {};

    Object.entries(res.getHeaders()).forEach(([key, value]) => {
        headers[key] = value;
    });

    const requestBody = JSON.parse(req.body ?? '{}');
    const result = detector.detect(userAgent, clientHints.parse(
        requestBody.hints ? requestBody.hints : headers, requestBody.meta ?? {}
    ));

    res.status(200).json({result})
}

requestBody format see docs/CLIENT_HINTS_BROWSER.MD

I'm not very familiar with next.js how to access the api from the tsx page

[LilliAlessio]

ok thx