FaceFilter Demo with NextJS template?

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

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

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 } });
}

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:

  1. 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
    
  2. 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'],
        },
    };
    
  3. 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
        }
    }
    
  4. Clear npm cache:
    Sometimes issues arise from cached packages. Clear the npm cache:

    npm cache clean --force
    
  5. 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

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

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.

@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',
              },
            },
          },
        ],
      });

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