Any example of setting up needle-engine with Nextjs?

🌵 Needle Engine
1

I am trying to setup Nextjs with needle engine but stuck on

‘Object.defineProperty called on non-object
TypeError: Object.defineProperty called on non-object at Function.defineProperty’

Original Post on Discord

by user 943472469057077261

2

A few more insights on that:

We used the React template and created a blank next project. We then went ahead and merged the Needle React project with the next project, i.e. tsconfig, package.json, etc. We moved the reference to needle-engine and needle-engine/node_modules/three out of the unity project and copied both inside the next project aswell. That’s basically it. The whole vite workflow still works, so that’s properly running and served.

by user 827095900392259645

3

We’re using dynamic import with ssr: false, also tried to just go for import() if window is present, but same result

by user 827095900392259645

4

The whole stacktrace looks like this (stripped out the project name)

by user 827095900392259645

5

Any ideas or hints are greatly appreciated :slightly_smiling_face:

by user 827095900392259645

6

When does this error show up exactly?

7

At runtime, when loading the page

by user 827095900392259645

8

When deployed?

9

So basically as soon as import(‘@needle-tools/engine’) is called

by user 827095900392259645

10

Already on local server in dev env

by user 827095900392259645

11

*local machine

by user 827095900392259645

12

Do you think you could share the project with me? I haven’t seen that error before (You can easily zip the current scene using Help/Needle Engine/Zip Scene and send it via PM if possible)

13

Possibly just share it with a new scene without any assets but using the same web project path - should reproduce there too I guess

14

I’ll PM you and can give you an invitation to gitlab

by user 827095900392259645

15

Thanks

16

For future reference: There’s a known issue with three-mesh-ui and its built module. We went with including the src directory. An easy approach is to make a webpack alias. In this case add to next.config.js:

  webpack: function (config, options) {
    config.resolve.alias['three-mesh-ui'] = path.resolve( __dirname, 'node_modules/three-mesh-ui/src/three-mesh-ui.js' );

    return config;
  },

by user 827095900392259645

17

We got it working for Nextjs now, but kept Needle as a seperate project. There are quite a few steps, but the general approach is

  1. keep Needle as a subfolder in the next project
  2. copy assets on rebuild
  3. Copy needle-engine and three folders vom PackageLibrary to a local folder, ignore it in tsconfig
  4. Adjust package.json to load packages from there
  5. Add a NeedleEngine component that wraps loading needle-engine and gen.js

by user 827095900392259645

18

Hey Daniel, thanks a lot for the summary and information. I think there are a few things we can automate here and create the setup as a template so it wont involve many manual steps (e.g. creating a symlink to the respective folders so we can still update via unity)

Some things can already be done via the current setup by just editing the package.json: there is a copy-from-to script which could be used to copy files on rebuild for example (we use it to copy some of the include files currently and also on building the distribution)

  1. Could also just ship with the package.
19

In general yes, but there are still some unmentioned caveats, that need further debugging. For instance it breaks when the needle-engine package is referenced via …/Library/PackageCache etc. Thats why we copy it in beforementioned vendor folder. Besides that we’d need a change to the mentioned ButtonColors declaration in the repository, since we changed that manually

When that is changed and with some more work I think I’ll be able to provide a working template

by user 827095900392259645

20

Tbh I’ll most likely won’t have the time before next weekend though

by user 827095900392259645