Error when building FaceFilter Sample with the Nexjs template

[Tamrat]

Hi, I want to use FaceFilter sample but with NextJs instead of Vite. I selected FaceFilter scene, picked NextJs sample, Localhost loads but i get the errors below. I am not sure where to add the dependencies. Any ideas?

[needle-assistant (Needle Engine Assistant)]

Hi Tamrat,

To resolve the build errors when running the FaceFilter sample with Next.js, you’ll need to ensure that you correctly add the necessary dependencies in your package.json file. Here’s how you can approach this:

1. Identify Required Dependencies: Based on the FaceFilter sample, you may need the following dependencies:

   • @needle-tools/engine for the core Needle Engine functionalities.
   • Dependencies related to WebXR, React-Three-Fiber, and others required by your project.

2. Adding Dependencies: In your Next.js project, navigate to your package.json and add the required dependencies. You can do this manually or by running:

   npm install @needle-tools/engine
   

   You may also need to install other dependencies such as three, @react-three/fiber, and any related types if you are using TypeScript.

3. Check for Peer Dependencies: Ensure you have compatible versions of peer dependencies. You can find peer dependency requirements on the documentation pages or npm registry.

4. Build the Project: After updating the package.json with the necessary dependencies, run:

   npm install
   npm run build
   

5. Errors in Build: If errors persist, check the logs for specific messages about missing components or modules. You may need to investigate and resolve specific modules that are indicated in the error logs.

If you have specific errors from the console output, feel free to share those, and I can assist you further. Additionally, ensure your Node.js version is compatible with the packages you are using.

For more details about the components you’re using, you can check the Needle Engine documentation.

Let me know if you need further assistance!

3 replies left
thread_NDXtp3Fj5KJx0YoU3GIKWrmo
Reply to this message to continue the conversation

[Tamrat]

@needle-assistant

@needle-tools/engine

I have installed all the required dependencies and also tried re installing but I still get the same error

[Tamrat]

How can i add/find the npmdefs for FaceMeshTexture, FaceFilterHeadPosition, FaceFilterRoot and NeedleFilterTrackingManager

[Tamrat]

This is what my Export Info looks like and It already has the FaceFilter added

[marcel (marwi)]

Hi, do you get any error/warning in the terminal/commandline window?

The screenshot doesnt look like the nextjs template - are you sure this is nextjs? https://needle-engine-nextjs.vercel.app/

Which version of Unity are you using?

[Tamrat]

Hi Marcel,

I am unity version 2022.3.46f1

I see these errors on my console

Yes im using the nextjs template, here is a full screen shot

[marcel (marwi)]

Sorry I was referring to the terminal (OSX) or commandline window on windows that runs your local server

[Tamrat]

This is my Terminal output for npm run dev

[marcel (marwi)]

Can you try to modify the next.config.js in your web project to look like this?

const webpack = require("webpack");
const path = require("path");

module.exports = async () => {
  const { needleNext } = await import("@needle-tools/engine/plugins/next/index.js");
  return needleNext({webpack: (config) => {
    config.resolve.alias['three'] = path.resolve(__dirname, 'node_modules/three');
    config.resolve.alias['three/examples/jsm'] = path.resolve(__dirname, 'node_modules/three/examples/jsm');
    config.resolve.alias['@needle-tools/engine'] = path.resolve(__dirname, 'node_modules/@needle-tools/engine');
    config.resolve.alias['@needle-tools/facefilter'] = path.resolve(__dirname, '../../../../../modules/needle-engine-samples/package/Runtime/Facefilter/FaceFilter~');

    config.resolve.extensionAlias = {
      ".js": [".js", ".ts"],
  };
  return config;
  }}, { modules: { webpack } });
}

(the relative paths might be slightly different for you depending on where you installed your project - you can make the facefilter paht absolute too (you can get the relative path from your package.json)

[Tamrat]

Awesome! setting the absolute path for FaceFilter worked. If i want to create multiple projects, what would be the best working method to use the same FaceFilter module

[Tamrat]

Also, i have one more question (happy to create another topic too)

If i want to implement the Needle Menu ui using my own nextjs UI. How would I go about performing the same ‘next filter’ feature that needle menu has. Is there a sample project i can look at. thanks!

[marcel (marwi)]

Yes please make a new topic

[marcel (marwi)]

Here’s an example anyways:

I created a new file named filter.tsx with this code:

// https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive
'use client'

import { findObjectOfType } from "@needle-tools/engine";
import { NeedleFilterTrackingManager } from "@needle-tools/facefilter";

export default function NextFilter({ ...props }): JSX.Element {

  function nextFilter() {
    // find the filter manager in the scene - this could of course also be saved in a variable
    const filter = findObjectOfType(NeedleFilterTrackingManager);
    filter?.selectNextFilter();
  }

  return (
    <button onClick={nextFilter}>
      Next Filter
    </button>
  );
}

and you can import it into your layout like this: const NextFilter = dynamic(() => import('../filter'), { ssr: false })

[marcel (marwi)]

Hi, this should be fixed in the latest engine release (without having to modify your next config manually)