three.js: Nodes: Nodes system throws exceptions when used with vite, `functionNode.call is not a function`

Description

I’m trying to use the Nodes system, including the MaterialX nodes, from a vite project.

Local development (unbundled) works fine, but bundling leads to errors. I was able to isolate and reproduce the issue, but I’m so far not sure if this is a three.js issue (some incorrect setup on the nodes) vs. a vite issue (something going wrong with bundling), or a combination thereof.

Reproduction steps

Go to https://stackblitz.com/edit/vitejs-vite-9b37bu
This roughly uses the code from https://threejs.org/examples/?q=materialx#webgl_nodes_materialx_noise
There’s no attempt to output something visually, it’s just about getting things to run at all.
Open the browser console
Run npm run start
Note no errors (code runs fine)
Cancel the run by pressing Ctrl + C in the terminal
Run npm run preview which builds the code and hosts the resulting bundled code
In the console, note errors:

and when names are kept during bundling, and code is not minified:

I was able to track this down to FunctionNodes: and functionNode.call being undefined in a production build vs. in local development, but I’m not sure what may be causing this.

I’m not aware of a workaround for how to use the nodes/MaterialX system with a bundler at the moment.

Live example

https://stackblitz.com/edit/vitejs-vite-9b37bu

Screenshots

No response

Version

r159

Device

Desktop, Mobile

Browser

Chrome, Safari

OS

Windows, MacOS

About this issue

Original URL
State: open
Created 7 months ago
Comments: 16 (11 by maintainers)

Most upvoted comments

From https://github.com/mrdoob/three.js/pull/27189#issuecomment-1854016611:

Out of curiosity, was it even intentional that #26881 now requires these additional steps? I can’t see a mention of it in the original PR so can only assume that was by accident. I think it would be better if there’s no additional configuration needed.

From https://github.com/vitejs/vite/issues/15319#issuecomment-1855666500:

Turns out the three.js package already declares these particular files as having side effects in its package.json. “sideEffects”: [“./examples/jsm/nodes/Nodes.js”],

Only that exact single module is side effectful, all the modules re-exported from there aren’t; If some of them are indeed side effectful, you should mark them in sideEffects, in your case:
- "sideEffects": ["./examples/jsm/nodes/Nodes.js"],
+ "sideEffects": ["./examples/jsm/nodes/Nodes.js", "./examples/jsm/nodes/core/FunctionCallNode.js"],

I’ll need to test globbing ./examples/jsm/nodes/* with Vite specifically, but best if we can avoid this altogether as per the first quote.

CodyJasonBennett on Dec 14, 2023

A relatively simple way to access the project you provided at https://stackblitz.com/edit/vitejs-vite-9b37bu, and then follow the steps below.

npm i

open node_modules/three/package.json

# Modify the sideEffects field to ["./examples/jsm/nodes/**/*"] (the fix for #27376)

npm run build
npm run preview

XiSenao on Dec 15, 2023

I think that many of these problems were due to https://github.com/mrdoob/three.js/pull/25074, I was hoping to find an alternative solution, but it seems that the best option would be that the method chaining only works for OperatorNode, MathNode, ShaderNode that would be the most used.

sunag on Dec 14, 2023

Hasn’t this been solved in #27189?

marcofugaro on Dec 13, 2023