Nuxt Integration Build Failed

🌵 Needle Engine
1

Hi! I´m testing the integration with nuxt that you setted up here. It works when using npm run dev (which is just nuxt dev underneath) but when triggering a build it throws an error and stops:

[11:56:52] ERROR Nuxt Build Error: [commonjs–resolver] node_modules/@needle-tools/engine/lib/engine-components/AnimatorController.js (910:18): Unexpected token &&. Expected * for generator, private key, identifier or async
file: C:/Dev/prototipoCustom/Needle/newProject/node_modules/@needle-tools/engine/lib/engine-components/AnimatorController.js:910:18

908: }
909: // private lastPos: Vector3 = new Vector3();
910: onBeforeUpdate(_weight) {
^
911: this.positionChange.set(0, 0, 0);
912: this.rotationChange.set(0, 0, 0, 1);

file: C:/Dev/prototipoCustom/Needle/newProject/node_modules/@needle-tools/engine/lib/engine-components/AnimatorController.js:910:18

908: }
909: // private lastPos: Vector3 = new Vector3();
910: onBeforeUpdate(_weight) {
^
911: this.positionChange.set(0, 0, 0);
912: this.rotationChange.set(0, 0, 0, 1);

at getRollupError (/C:/Dev/prototipoCustom/Needle/newProject/node_modules/rollup/dist/es/shared/parseAst.js:395:41)
at ParseError.initialise (/C:/Dev/prototipoCustom/Needle/newProject/node_modules/rollup/dist/es/shared/node-entry.js:13247:28)
at convertNode (/C:/Dev/prototipoCustom/Needle/newProject/node_modules/rollup/dist/es/shared/node-entry.js:14955:10)
at convertProgram (/C:/Dev/prototipoCustom/Needle/newProject/node_modules/rollup/dist/es/shared/node-entry.js:14201:12)
at Module.setSource (/C:/Dev/prototipoCustom/Needle/newProject/node_modules/rollup/dist/es/shared/node-entry.js:15941:24)
at async ModuleLoader.addModuleSource (/C:/Dev/prototipoCustom/Needle/newProject/node_modules/rollup/dist/es/shared/node-entry.js:19813:13)

This is during Server construction. I can share the full Log if necessary.

2

Hi whtw4thewin,

The build error you are encountering with Nuxt seems to be related to how TypeScript decorators and class methods are being handled during the build process. The error message indicates that the Rollup bundler (used by Nuxt under the hood) is failing to parse a specific method in the AnimatorController.js file where it expects a generator function but encounters an unexpected token (onBeforeUpdate(_weight)).

Here are a few steps to troubleshoot and potentially resolve this issue:

  1. Ensure TypeScript Configurations: Make sure that your tsconfig.json is set up correctly. Specifically, ensure that experimentalDecorators and emitDecoratorMetadata are enabled. Here’s an example configuration:

    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    ...
  },
  ...
}

  2. Check Vite Compatibility: Since Nuxt uses Vite, ensure that your version of Vite is compatible with the Needle Engine and the packages you are using. Consider updating Vite or the dependency versions in your package.json:

    "devDependencies": {
  "vite": "^4.3.9",
  ...
}

  3. Update Packages: Sometimes, issues arise from outdated packages. You can update all packages to their latest versions using:

    npm update

  4. Building in Development Mode: If the issue persists, try running a development build with detailed logging. This might give you additional insight into what is causing the problem.

  5. Rollup Plugins: Consider whether additional Rollup plugins may be required to handle TypeScript or decorate class methods appropriately.

If you continue encountering this error, please provide more details about the versions of Node.js, Nuxt, Vite, and Needle Engine you are using. You can copy your package configuration by using "Copy Project Info Into Clipboard" from your Nuxt project to share it here.

For additional resources, you may find useful documentation on integrating Vite or troubleshooting build errors in:

Let me know how it goes!

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

3

Hey there, thanks for the report. That is indeed strange – it seems to be a Rollup issue, especially since it works in dev and fails in build. I’ll open an issue internally for it.

1 Like
4

Great!, the only thing i modified for testing on local was "dev": "nuxt dev", on package.json by removing HOST=0.0.0.0.
Additionally, on nuxt.config.ts:

const { needlePlugins, loadConfig } = await import(
    '@needle-tools/engine/plugins/vite/index.js'
  );

VSCode is complaining about:
Could not find a declaration file for module ‘@needle-tools/engine/plugins/vite/index.js’. ‘c:/Dev/prototipoCustom/Needle/newProject/node_modules/@needle-tools/engine/plugins/vite/index.js’ implicitly has an ‘any’ type.
If the ‘@needle-tools/engine’ package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module '@needle-tools/engine/plugins/vite/index.js';