Problem of '#' being output to the calling module name in Next.JS framework

[choiyeongung]

[Usage environment]

• Node: 21.7.1
• Next.JS: 14.2.5 (AppRouter)
• React: 18
• @fingerprintjs/fingerprintjs-pro-react: 2.6.3

Hello.
Currently, I want to use Fingerprintjs in Next.JS, but the problem situation is exposed when using the code line presented after setting the subdomain.
It's a problem because I can't find the module, but it's hard to figure out if this is caused by a web pack or other settings.
First, the module will be imported from the node_nodules folder in the form of '@fingerprintjs-pro-react\dist\fp-pro-react.esm.js#fingerprintJSPro #defaultEndpoint', where '#fingerprintJSPro #defaultEndpoint' will follow as a suffix.
I called the supplier 'use client' and tried it because I was wondering if it would be a problem when it was called from the server component, but the same phenomenon occurred.
If you remove the 'endpoint' and 'scriptUrlPattern' properties in FpjsProvider, the script runs normally.
I tested both dev and prod environments and the same problem is occurring.
Can I get help on how I can solve the problem?

'use client'
import { FpjsProvider, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-react'

export defualt function () {
return(
<FpjsProvider
loadOptions={{
apiKey: FINGERPRINTJS_API_KEY,
endpoint: [
"https://metrics.star-law.com",
// FingerprintJSPro.defaultEndpoint
],
scriptUrlPattern: [
"https://metrics.star-law.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js",
// FingerprintJSPro.defaultScriptUrlPattern
],
region: "ap"
}}>
<Component />
</FpjsProvider>
)
}

Below is the error I received.

---

Error: Could not find the module "C:\my-project\node_modules@fingerprintjs\fingerprintjs-pro-react\dist\fp-pro-react.esm.js#FingerprintJSPro#defaultEndpoint" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

[makma]

Hello @choiyeongung,
I checked your code (and actually tested it in my NextJS app router component) and it looks to me your code is correct and you are setting the fallbacks correctly. It works on my end (both dev and build).

I really think it might be related to your webpack settings.

My code for your reference:

"use client";

// /app/mycomponent/page.tsx
import { useState } from "react";
import {
  CacheLocation,
  FingerprintJSPro,
  useVisitorData,
} from "@fingerprintjs/fingerprintjs-pro-react";
import { FpjsProvider } from "@fingerprintjs/fingerprintjs-pro-react";
import { FINGERPRINT_PUBLIC_API_KEY } from "../../shared/constants";

export default function CustomProxyIntegration() {
  return (
    <FpjsProvider
      loadOptions={{
        apiKey: FINGERPRINT_PUBLIC_API_KEY,
        scriptUrlPattern: [
          FingerprintJSPro.defaultScriptUrlPattern,
        ],
        endpoint: [
          FingerprintJSPro.defaultEndpoint,
        ],
      }}
      cacheLocation={CacheLocation.SessionStorage}
      cacheTimeInSeconds={60}
    >
      <FingerprintData />
    </FpjsProvider>
  );
}
...

My deps:

...
"@fingerprintjs/fingerprintjs-pro-react": "2.6.3",
"next": "14.2.10"
"react": "18.3.1",
"node": "20.14.0"
...