three.js: Circular dependency in ShaderNode

Description

ShaderNode.js:3 Uncaught (in promise) ReferenceError: Cannot access 'ShaderNode' before initialization
    at Object.ShaderNode (ShaderNode.js:3:59)
    at eval (SkinningNode.js:8:87)
    at ./node_modules/three/examples/jsm/nodes/accessors/SkinningNode.js (chunk.vendors-node_modules_blueimp-md5_js_md5_js-node_modules_element-resize-detector_src_element-r-f0dec0.bfeca9936d49aeae8903.js:2501:1)
    at __webpack_require__ (chunk.app.0c10a065d695b4093c2e.js:107:42)
    at eval (ShaderNodeElements.js:248:85)
    at ./node_modules/three/examples/jsm/nodes/shadernode/ShaderNodeElements.js (chunk.vendors-node_modules_blueimp-md5_js_md5_js-node_modules_element-resize-detector_src_element-r-f0dec0.bfeca9936d49aeae8903.js:3590:1)
    at __webpack_require__ (chunk.app.0c10a065d695b4093c2e.js:107:42)
    at eval (ShaderNode.js:20:80)
    at ./node_modules/three/examples/jsm/nodes/shadernode/ShaderNode.js (chunk.vendors-node_modules_blueimp-md5_js_md5_js-node_modules_element-resize-detector_src_element-r-f0dec0.bfeca9936d49aeae8903.js:3568:1)
    at __webpack_require__ (chunk.app.0c10a065d695b4093c2e.js:107:42)

Reproduction steps

use NodeMaterial and build with webpack

Code

// code goes here

Live example

n/a

Screenshots

No response

Version

158

Device

Desktop

Browser

Chrome

OS

Windows

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 30 (21 by maintainers)

Most upvoted comments

I think the issue is that ShaderNode is exported two times,

one here

https://github.com/mrdoob/three.js/blob/5f75a1bddf43237e150be0f7195cf5e87a4b0f92/examples/jsm/nodes/shadernode/ShaderNode.js#L203

and one here

https://github.com/mrdoob/three.js/blob/5f75a1bddf43237e150be0f7195cf5e87a4b0f92/examples/jsm/nodes/shadernode/ShaderNodeBaseElements.js#L59

For this it’s causing the circular dependency when imported inside SkinningNode.js

https://github.com/mrdoob/three.js/blob/5f75a1bddf43237e150be0f7195cf5e87a4b0f92/examples/jsm/nodes/accessors/SkinningNode.js#L2-L16

marcofugaro on Jan 5, 2023

Hmm… Better remove it from ShaderNodeBaseElement I think.

sunag on Jan 5, 2023

Finally finished it: https://github.com/mrdoob/three.js/pull/25498

LeviPesin on Feb 13, 2023

Mostly finished the PR, will test and file it tomorrow.

LeviPesin on Feb 11, 2023

@LeviPesin maybe we needed made something like the old version because of method chaining? thinking about the possibility of the user to extend the nodes externally. https://github.com/sunag/three.js/blob/86982e1e9c90abb0a1819288a4bea00a366f0a72/examples/jsm/nodes/inputs/FloatNode.js#L54

Actually, there is a problem here that such syntax is import-order-dependent – so with it, to properly use the chaining syntax in “core” nodes we need to maintain a proper import order in Nodes.js (maybe just math classes first). But it’s doable…

LeviPesin on Feb 9, 2023

Maybe one way to fix this problem would be to move things like export const nodeAsFunction = nodeProxy( NodeAsClass ) from ShaderNode(Base)Elements.js to the corresponding node files, import in “core” node system only from them, and export them from Nodes.js (we wouldn’t need then ShaderNodeElements.js, I think).

Started working on it, will file a PR soon.

LeviPesin on Feb 9, 2023

So that something like node.negate().add( otherNode ).functionThatUserAdds( thirdNode ) works.

LeviPesin on Feb 5, 2023

@LeviPesin Ah yeah! I think so.

sunag on Feb 5, 2023

More detail for the update:

In examples/jsm/nodes the tools say there are 22 circular dependencies.

Using madge 5.02 (latest has a bug and wont generate graphs) Update: latest is fixed.

From the examples/jsm/ folder run the following command. The warning flag at the end displays files it skipped if any.

npx madge nodes --circular --warning

This gives the following output on the current dev branch:

✖ Found 22 circular dependencies!

1) accessors/BitangentNode.js > accessors/NormalNode.js > math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js
2) utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js > accessors/MaterialNode.js
3) math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js > accessors/ModelViewProjectionNode.js > accessors/PositionNode.js
4) accessors/NormalNode.js > math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js
5) math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js > accessors/TangentNode.js
6) utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js > accessors/TangentNode.js
7) math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js
8) shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js 
> shadernode/ShaderNode.js
9) utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > accessors/CubeTextureNode.js > accessors/ReflectVectorNode.js > shadernode/ShaderNodeBaseElements.js > shadernode/ShaderNode.js
10) shadernode/ShaderNodeElements.js > accessors/ExtendedMaterialNode.js
11) math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > fog/FogExp2Node.js > fog/FogNode.js   
12) shadernode/ShaderNodeElements.js > functions/BSDF/DFGApprox.js
13) shadernode/ShaderNodeElements.js > functions/PhongLightingModel.js
14) shadernode/ShaderNodeElements.js > functions/PhysicalLightingModel.js
15) shadernode/ShaderNodeElements.js > lighting/LightsNode.js > lighting/AnalyticLightNode.js
16) shadernode/ShaderNodeElements.js > utils/EquirectUVNode.js
17) math/MathNode.js > utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > utils/SpriteSheetUVNode.js
18) utils/SplitNode.js > core/NodeBuilder.js > shadernode/ShaderNodeElements.js > utils/SpriteSheetUVNode.js
19) Nodes.js > loaders/NodeLoader.js
20) Nodes.js > materialx/MaterialXNodes.js > materialx/lib/mx_hsv.js
21) Nodes.js > materialx/MaterialXNodes.js > materialx/lib/mx_noise.js
22) Nodes.js > materialx/MaterialXNodes.js > materialx/lib/mx_transform_color.js

Graph of just the circular dependency issues:

nodes-graph-circular

The complete graph:

nodes-graph

red = circular dep blue = normal, with deps green = leaf node, no deps

epreston on Feb 5, 2023

It works in browser. So it is rather a Webpack bug…

LeviPesin on Jan 5, 2023