Not working with NextJS

[ghostlexly]

facefilter npm package is not working with NextJS.

steps to reproduce:
yarn add facefilter

issue:

node_1          | SyntaxError: Cannot use import statement outside a module
node_1          |     at Object.compileFunction (node:vm:360:18)
node_1          |     at wrapSafe (node:internal/modules/cjs/loader:1055:15)
node_1          |     at Module._compile (node:internal/modules/cjs/loader:1090:27)
node_1          |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
node_1          |     at Module.load (node:internal/modules/cjs/loader:1004:32)
node_1          |     at Function.Module._load (node:internal/modules/cjs/loader:839:12)
node_1          |     at Module.require (node:internal/modules/cjs/loader:1028:19)
node_1          |     at require (node:internal/modules/cjs/helpers:102:18)
node_1          |     at Object.facefilter (/usr/src/app/.next/server/pages/message/[uuid]/sender/video.js:112:18)
node_1          |     at __webpack_require__ (/usr/src/app/.next/server/webpack-runtime.js:33:42) {
node_1          |   page: '/message/[uuid]/sender/video'
node_1          | }

[xavierjs]

First, Hi

NextJS runs JavaScript code on the server side.
But some browser APIs like WebGL or MediaStream API cannot run on the server side. Jeeliz FaceFilter relies on WebGL and MediaStream API. So you need to tell NextJS to force execution on the client side.

To run code on the client side with NextJS you can use dynamic.
At the beginning of the component importing the AR component
( the AR Component is AppCanvas - https://github.com/jeeliz/jeelizFaceFilter/blob/master/reactThreeFiberDemo/src/js/components/AppCanvas.js )

import dynamic from 'next/dynamic'

Then:

const AppCanvasDyn = dynamic(
    () => {
      return import("AppCanvas");
    },
    { ssr: false }
  );

Then in the rendering, you render < AppCanvasDyn/> instead of <AppCanvas/>

[xavierjs]

@ghostlexly does it help to make it work with NextJS?

[xavierjs]

I suppose it worked so I close the issue. @ghostlexly when someone takes time to help you to solve an issue, you should at least say thank you, your mother should have taught you that.

[usama203]

I suppose it worked so I close the issue. @ghostlexly when someone takes time to help you to solve an issue, you should at least say thank you, your mother should have taught you that.

Thank you brother it really helps. I was stuck on same issue almost 3 hours.

[omgcx1222]

First, Hi

NextJS runs JavaScript code on the server side. But some browser APIs like WebGL or MediaStream API cannot run on the server side. Jeeliz FaceFilter relies on WebGL and MediaStream API. So you need to tell NextJS to force execution on the client side.

To run code on the client side with NextJS you can use dynamic. At the beginning of the component importing the AR component ( the AR Component is AppCanvas - https://github.com/jeeliz/jeelizFaceFilter/blob/master/reactThreeFiberDemo/src/js/components/AppCanvas.js )

import dynamic from 'next/dynamic'

Then:

const AppCanvasDyn = dynamic(
    () => {
      return import("AppCanvas");
    },
    { ssr: false }
  );

Then in the rendering, you render < AppCanvasDyn/> instead of <AppCanvas/>

An 'ARCanvas' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component | null' is not a valid JSX element. error message is displayed when the yarn build command is run. @types/react": "18.2.25"

`const JEELIZVTOWIDGET = useRef();
useEffect(() => {
if (!JEELIZVTOWIDGET.current) {
import("jeelizvtowidget").then((module) => {
JEELIZVTOWIDGET.current = module.JEELIZVTOWIDGET;

    init_VTOWidget({
      placeHolder,
      canvas,
      toggle_loading,
      sku: tryOnProduct.ar_model_url,
      JEELIZVTOWIDGET: JEELIZVTOWIDGET.current,
    });
  });
} else {
  JEELIZVTOWIDGET.current?.resume(true);
}

return () => {
  JEELIZVTOWIDGET.current?.destroy();
  // JEELIZVTOWIDGET?.pause(true);
};

}, [tryOnProduct.ar_model_url]);`

I use it this way, No problems with development and build, but I don't know if there are other problems

[ghostlexly]

I suppose it worked so I close the issue. @ghostlexly when someone takes time to help you to solve an issue, you should at least say thank you, your mother should have taught you that.

I just never received the notifications for your messages, but thanks for the solution, even if it's late. I always appreciate the community's help here.
We never had the solution, my company has just removed the filter idea from the roadmap.