# Can't Import NodeMaterials R169; Error: Cannot read properties of null (reading 'assign')

**URL:** <https://discourse.threejs.org/t/cant-import-nodematerials-r169-error-cannot-read-properties-of-null-reading-assign/73054>\
**Category:** Questions\
**Tags:** node-material, bug, webgpu\
**Created:** [October 21, 2024, 3:57pm UTC](https://discourse.threejs.org/t/cant-import-nodematerials-r169-error-cannot-read-properties-of-null-reading-assign/73054 "2024-10-21T15:57:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![miguelmyers8](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/miguelmyers8/32/31451_2.png) [@miguelmyers8](https://discourse.threejs.org/u/miguelmyers8)\
**Post date:** [October 21, 2024, 3:57pm UTC](https://discourse.threejs.org/t/cant-import-nodematerials-r169-error-cannot-read-properties-of-null-reading-assign/73054/1 "2024-10-21T15:57:16Z")

</div>

I have two very basic Node projects. Project `A` imports and call a simple function from project `B`. and renders it with WebGPURenderer.

```javascript
//Project B
import * as THREE from 'three/tsl';

export const createPlane = () => {
    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(),new THREE.MeshBasicNodeMaterial())
    mesh.frustumCulled =false 
    return mesh
}
//------------

//Project A
import * as foo from '@B/core'
...
scene.add(foo.createPlane())

```

But calling my function from project A cause this error:

 ![Screenshot 2024-10-21 114307](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/0/f036499b5970c5c40b2f0c2edd06c5e7ea73adbc.png)

While this works, I don’t intend to write my library this way:

```javascript
//Project B
import * as THREE from 'three/tsl';

export const createPlane = ({material}) => {
    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(),material)
    mesh.frustumCulled =false 
    return mesh
}

//------------

//Project A
import * as THREE from 'three/tsl';
import * as foo from '@B/core'
...
scene.add(foo.createPlane({material:new THREE.MeshBasicNodeMaterial()}))

```

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [October 22, 2024, 3:44am UTC](https://discourse.threejs.org/t/cant-import-nodematerials-r169-error-cannot-read-properties-of-null-reading-assign/73054/2 "2024-10-22T03:44:49Z")

</div>

Not really sure where your setup might be causing this error but here is something that works.

Just place the `BCore.js` file where you think it should go and change the path to it inside the `BCore.html` file. Also note that I have used semicolons (`;`) in the code.

[BCore.zip](https://discourse.threejs.org/uploads/short-url/uJIGHDTmUxLTKqG4Ewqwh9PVRQV.zip) (1.3 KB)

---

<div class="post-metadata">

**Author:** ![chenglu.she](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chenglu.she/32/61502_2.png) [@chenglu.she](https://discourse.threejs.org/u/chenglu.she)\
**Post date:** [July 9, 2025, 8:01am UTC](https://discourse.threejs.org/t/cant-import-nodematerials-r169-error-cannot-read-properties-of-null-reading-assign/73054/3 "2025-07-09T08:01:29Z")

</div>

I just ran into the same problem, and the root cause is that [Multiple instances of Three.js being imported](https://discourse.threejs.org/t/import-from-three-tsl-warning-multiple-instances-of-three-js-being-imported/70303).

The code trigger this error is:

```javascript
import { MeshBasicNodeMaterial } from 'three/src/Three.WebGPU.js';

```

which is “automatically added” by VSCode.

Change it to the belowing will fix this error:

```javascript
import { MeshBasicNodeMaterial } from 'three/webgpu';

```