Trying basic Angular Three example

[SteamMatthew]

I found this library and understand it's a complex effort and was excited with the demos and the activity of releases, keep it up.

With that being said, I'm looking to use the library as part of a digital asset manager project that I'm looking to build and this library would solve one large portion of my needs.

Was looking at the following path to quickly get me off the ground and start to put it to use:

• https://github.com/angular-threejs/angular-three/tree/main/apps/kitchen-sink/src/app/soba/basic

I believe I have the right and latest dependencies as of yesterday's upload in my project as shown here:

    "angular-three": "^2.0.0-beta.316",
    "angular-three-postprocessing": "^2.2.1",
    "angular-three-soba": "^2.2.1",

Trying to start my basic Angular project with npm start, it serves the website but then eventually it will crash out with the below message. Ideas?

X [ERROR] No matching export in "node_modules/angular-three/fesm2022/angular-three.mjs" for import "hasListener"

    node_modules/angular-three-soba/fesm2022/angular-three-soba-gizmos.mjs:4:56:
      4 │ import { pick, injectStore, extend, injectBeforeRender, hasListener, NgtPortal, NgtPortalContent, NgtArgs, getEmitter, omit, getLocalState, resolveRef } from 'angular-three';
        ╵                                                         ~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/angular-three/fesm2022/angular-three.mjs" for import "getEmitter"

    node_modules/angular-three-soba/fesm2022/angular-three-soba-gizmos.mjs:4:107:
      4 │ import { pick, injectStore, extend, injectBeforeRender, hasListener, NgtPortal, NgtPortalContent, NgtArgs, getEmitter, omit, getLocalState, resolveRef } from 'angular-three';
        ╵                                                                                                            ~~~~~~~~~~


XXX\node_modules\vite\node_modules\esbuild\lib\main.js:1472
  let error = new Error(text);
              ^

Error: Build failed with 2 errors:
node_modules/angular-three-soba/fesm2022/angular-three-soba-gizmos.mjs:4:56: ERROR: No matching export in "node_modules/angular-three/fesm2022/angular-three.mjs" for import "hasListener"
node_modules/angular-three-soba/fesm2022/angular-three-soba-gizmos.mjs:4:107: ERROR: No matching export in "node_modules/angular-three/fesm2022/angular-three.mjs" for import "getEmitter"
    at failureErrorWithLog (XXX\node_modules\vite\node_modules\esbuild\lib\main.js:1472:15)
    at XXX\node_modules\vite\node_modules\esbuild\lib\main.js:945:25
    at XXX\node_modules\vite\node_modules\esbuild\lib\main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v20.9.0

Process finished with exit code 1

[SteamMatthew]

So realized that there's one not marked for beta and now using:

    "angular-three": "^2.2.1",
    "angular-three-postprocessing": "^2.2.1",
    "angular-three-soba": "^2.2.1",
    "angular-three-cannon": "^2.2.1",
    "angular-three-rapier": "^2.2.1",

Doesn't seem to be crashing anymore a bit after the start. Might have it resolved for now, will continue to test. Might have some other console errors to fix.

[SteamMatthew]

So my current error in console is:

Uncaught SyntaxError: Export 'import_vanilla' is not defined in module

Just looking to get the simplest example working to see it in action and can take it from there to adapt it to my use cases.

[SteamMatthew]

Checking on netlify build - 66e833a5bee04400077b09ea in regards to my possible related error.

Looks like my issue is in the build logs:

8:35:32 AM: (node:5823) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
8:35:32 AM: (Use `node --trace-warnings ...` to show where the warning was created)
8:35:32 AM: /opt/build/repo/node_modules/.pnpm/three-custom-shader-material@5.4.0_react@18.3.1_three@0.168.0/node_modules/three-custom-shader-material/vanilla/dist/three-custom-shader-material-vanilla.esm.js:1
8:35:32 AM: export { C as default } from '../../dist/vanilla-307d3a93.esm.js';
8:35:32 AM: ^^^^^^
8:35:32 AM: SyntaxError: Unexpected token 'export'

[nartc]

@SteamMatthew Hi, thank you for trying it out.

Regarding import_vanilla is not defined in module error, note that the packages like angular-three-soba or angular-three-postprocessing etc... require many peer dependencies depending on what you're using. I'm aware that the documentation still lacks on this as I'm trying to find a way to define a single source of truth to list all the peer deps and propagate the information to all of the sites.

It's possible that a peer dep was missing. If you could provide a reproduce repo, that'd be great.

re:build error
That's analogjs issue with esm/cjs and I don't think it has anything to do with the published packages themselves.

[SteamMatthew]

Thank you for the quick response. Hope these packages gets more usage and contributors along the way.

I'm honestly just trying to mimic the example provided above. My goal is to use the simple soba basic example as a great starter template for application building to create a custom interactive viewer for materials, wireframe, animations and other useful modes for many 3D assets that I plan to build (something similar to PolyHaven.com website as a viewer for a 3D asset)

Realizing now I think I need to double check a few things and also add CUSTOM_ELEMENTS_SCHEMA to my component.

My current application is running Angular at version 18.2.4. It's quite barebone at the moment as been hunting for this type of component and was considering building my own as it would be the largest challenge.

Would love to help contribute how I can to this effort. Once I have it running will be using WebStorm to help triage more of the package.

I'm going to keep trying today to see if I overlooked something and will post updates.

[nartc]

Another thing to try is to give the template https://github.com/angular-threejs/template a try

[SteamMatthew]

Awesome thank you will try it out.

[SteamMatthew]

@nartc Thank you for the template project. I took the component for the simple box canvas and successfully have it working in my application now. I will now actively look for every small fix that gets published.

Of course will need to slowly work on adding back the other sample code to put it back into the starter example I was looking to build.

As I play more with it, like to help contribute. I should be able to advance more easily on my own now that I can try by trial and error and code inspection.

Will close this issue, thank you for the help.

[nartc]

@SteamMatthew Nice. Glad to help. Feel free to open a new issue or discussion and I can help with whatevet I can

[qagwaai]

Template with Soba based on nartc's template - https://github.com/qagwaai/3js4