FaceFilter Demo with NextJS template?

Tamrat · April 21, 2025, 11:26pm

Hello is there a stackblitz / github facefilter demo but for Nextjs template? Is that possible?

needle-assistant · April 21, 2025, 11:26pm

Hello Tamrat,

For creating a FaceFilter demo using Next.js, there is indeed a sample available. You can find a working Next.js application utilizing Needle Engine at this link. This demo showcases various features, including Face Filters which allow you to create unique filters right in the web browser.

Additionally, you can check the source code for the Face Filter components used in the sample at the following repository: Needle Engine Samples, which includes details about the components and their setup (see the documentation).

If you’re looking to customize or build upon this, you’ll be able to integrate the suggested components in your Next.js project by following the details outlined in the README files of the samples.

If you need further assistance in setting it up or specific implementation details, feel free to ask!

1 replies left - Get a PRO license for more AI replies.
thread_P9toc748qkRDd6yGzrCwWWYt
Reply to this message to continue the conversation

Tamrat · April 21, 2025, 11:54pm

So i tried the updated Next Js template and i get this error when i run it. Any ideas?

Compiling / ...
 ⨯ ./node_modules/@needle-tools/facefilter/index.ts
Module parse failed: Unexpected token (30:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export {
>     type BlendshapeName,
|     FacefilterUtils as NeedleFaceFilterUtils
| } from './src/utils.js';

Import trace for requested module:
./node_modules/@needle-tools/facefilter/index.ts
./src/generated/register_types.ts
./src/generated/gen.js
./src/needleEngine.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz'
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz'
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.

my package.json

{
	"name": "nextjs-template",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev --experimental-https",
		"build": "next build && npx --yes @needle-tools/gltf-build-pipeline transform ./dist",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"@babel/runtime": "^7.16.0",
		"@needle-tools/engine": "^4.4.0-beta.3",
		"@needle-tools/facefilter": "^1.0.0-alpha.20",
		"next": "^14.1.0",
		"react": "18.2.0",
		"react-dom": "18.2.0",
		"three": "npm:@needle-tools/three@^0.169.4"
	},
	"devDependencies": {
		"@needle-tools/helper": "^1.11.3",
		"@types/node": "18.15.11",
		"@types/react": "18.0.35",
		"@types/react-dom": "18.0.11",
		"@types/three": "^0.175.0",
		"autoprefixer": "10.4.14",
		"eslint": "8.38.0",
		"eslint-config-next": "13.3.0",
		"postcss": "8.4.21",
		"tailwindcss": "3.3.1",
		"typescript": "5.0.4"
	}
}

my next.config.js

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, 'node_modules/@needle-tools/facefilter');

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

needle-assistant · April 21, 2025, 11:54pm

Hi Tamrat,

The error you’re encountering suggests that Webpack is having trouble parsing TypeScript files, specifically the index.ts file from the @needle-tools/facefilter module. This could be due to a missing TypeScript loader configuration.

Here are a few steps you can take to resolve this issue:

Install necessary dependencies:
Make sure that you have the required loaders installed. You should have ts-loader if you’re using TypeScript:
```
npm install ts-loader --save-dev
```

Update your Webpack configuration:
If you’re using a custom Webpack configuration, make sure to add the TypeScript loader for .ts files. Here’s an example snippet for your webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
};

Check your TypeScript configuration:
Ensure that your tsconfig.json is set up correctly. Make sure the following settings exist or add them if they don’t:

{
    "compilerOptions": {
        "module": "esnext",
        "target": "esnext",
        "jsx": "react",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true
    }
}

Clear npm cache:
Sometimes issues arise from cached packages. Clear the npm cache:
```
npm cache clean --force
```
Remove the .next directory:
If you haven’t already, try removing the .next directory and rebuilding your application:
```
rm -rf .next
npm run build
```

If the problem persists after trying these steps, please let me know your specific Next.js, Node.js, and Needle Engine versions. This additional information will help troubleshoot the issue further.

0 replies left - Get a PRO license for more AI replies.
thread_P9toc748qkRDd6yGzrCwWWYt
Reply to this message to continue the conversation

marwie1 · April 22, 2025, 4:27am

Hi Tamrat, did the Bot’s reply help you solve the webpack config issue yet?

Tamrat · April 22, 2025, 4:04pm

Hi Marwie, unfortunately no, I’m still getting the same error

Compiling / ...
 ⨯ ./node_modules/@needle-tools/facefilter/index.ts
Module parse failed: Unexpected token (30:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export {
>     type BlendshapeName,
|     FacefilterUtils as NeedleFaceFilterUtils
| } from './src/utils.js';

Import trace for requested module:
./node_modules/@needle-tools/facefilter/index.ts
./src/generated/register_types.ts
./src/generated/gen.js
./src/needleEngine.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz'
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz'
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.gz_' -> '/Users/tamrat/finc/ar/nextjs-sample/dist/cache/webpack/client-development-fallback/0.pack.

Tamrat · April 22, 2025, 4:57pm

@marwie1 addding ts loader to web pack fixed it. Now its working

      config.module.rules.push({
        test: /\.tsx?$/,
        include: [
          path.resolve(__dirname, 'node_modules/@needle-tools/facefilter')
        ],
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              compilerOptions: {
                module: 'esnext',
              },
            },
          },
        ],
      });

system · May 5, 2025, 4:58pm

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Error when building FaceFilter Sample with the Nexjs template 🌵 Needle Engine question	15	16	October 13, 2024
NextJS template with api routes 🌵 Needle Engine question	3	6	May 15, 2025
Any example of setting up needle-engine with Nextjs? 🌵 Needle Engine question	27	107	December 12, 2022
Are there any resources for exporting to NextJS 13+ (with the app directory) 🌵 Needle Engine question	31	65	June 12, 2023
Import error in generateMeshBVHWorker (Needle and NextJS integration) 🌵 Needle Engine question	5	37	August 11, 2024

FaceFilter Demo with NextJS template?

Related topics