# Duplicate Needle Engine generate Bug

**URL:** <https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245>\
**Category:** 🌵 Needle Engine\
**Tags:** question\
**Created:** [July 20, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245 "2023-07-20T00:00:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 20, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/1 "2023-07-20T00:00:00Z")

</div>

Hello,

I’m trying to generate multiple needle canvas to manipulate 3D object with commune buttons.  
But this error appear :

I’m using the React Template with Needle 3.6.15.

Does somebody have an idea ?

 ![image.png](https://europe1.discourse-cdn.com/flex006/uploads/needle1/original/2X/1/1dda6126a1e39c4c6662d8137adf29cf13b807e6.png)

[Original Post on Discord](https://discord.com/channels/717429793926283276/1131554138220671036)

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![hybridherbst](https://forum.needle.tools/user_avatar/forum.needle.tools/hybridherbst/32/3416_2.png) [@hybridherbst](https://forum.needle.tools/u/hybridherbst)\
**Post date:** [July 20, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/2 "2023-07-20T00:00:00Z")

</div>

Mh, I haven’t seen that issue before.  
Does that only happen in a production build? Not sure what “\_a3” is

---

<div class="post-metadata">

**Author:** ![hybridherbst](https://forum.needle.tools/user_avatar/forum.needle.tools/hybridherbst/32/3416_2.png) [@hybridherbst](https://forum.needle.tools/u/hybridherbst)\
**Post date:** [July 20, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/3 "2023-07-20T00:00:00Z")

</div>

Needle Engine is designed to work with multiple instances per page, however I’m not sure if the react template is set up in a way that this works out of the box

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/4 "2023-07-24T00:00:00Z")

</div>

Do you have an idea of how could I fix this issue ?

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/5 "2023-07-24T00:00:00Z")

</div>

It seems to be a problem with Volume.ts error with postProcessing, in this part :

```ts
awake() {
        // ensure the profile is initialized
        this.sharedProfile?.init();

        if (debug) {
            console.log(this);
            console.log("Press P to toggle post processing");
            window.addEventListener("keydown", (e) => {
                if (e.key === "p") {
                    console.log("Toggle volume: " + this.name, !this.enabled);
                    this.enabled = !this.enabled;
                }
            });
        }
    }

```

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/6 "2023-07-24T00:00:00Z")

</div>

Here the log from the canvas :  
 ![image.png](https://europe1.discourse-cdn.com/flex006/uploads/needle1/original/2X/5/565341e7af1e7b5909df021b4c2340e7f6239738.png)

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/7 "2023-07-24T00:00:00Z")

</div>

Hi, can you explain what you do here? Do you mean you have a webpage with multiple components ?

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/8 "2023-07-24T00:00:00Z")

</div>

Yes, that’s it  
Here my React component :

```tsx
const NeedleContainer = ({getNeedle, resetKey}) => {
  return (
      <div id="needleContainer">
        {resetKey ? <NeedleEngine key={resetKey} getNeedle={getNeedle} /> : ""}
      </div>
  );
};

const ResetNeedle = ({ handleReset }) => {
  return (
    <button style={{transform: "translateY(-50px) translateX(80px)", zIndex: "100"}} onClick={handleReset}>
      Réinitialiser la scène 3D
    </button>
  );
};

function NeedleEngine(props) {
  const needleRef = useRef()
  const files = JSON.stringify(globalThis["needle:codegen_files"])

  useEffect(() => {
    
    // console.log("Needle => ", needleRef)

    if(props.getNeedle) props.getNeedle(needleRef)

  }, [])
  

  return <needle-engine ref={needleRef} src={"assets/sceneRoot.glb"}>
      {/* @ts-ignore */}
      {/* <div className="loading"></div> */}
      {/* @ts-ignore */}
      {/* <div className="desktop ar"> {props.children}</div> */}
    </needle-engine>;
}

```

And I got this error when I duplicate my component like it :

```auto
<NeedleContainer getNeedle={getNeedle} handleReset={handleReset} resetKey={resetKey}/>
<NeedleContainer getNeedle={getNeedle} handleReset={handleReset} resetKey={resetKey}/>

```

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/9 "2023-07-24T00:00:00Z")

</div>

I tried like it too :

```tsx
<NeedleContainer getNeedle={getNeedle} handleReset={handleReset} resetKey={resetKey}/>
<needle-engine src={"assets/sceneRoot.glb"}></needle-engine>

```

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/10 "2023-07-24T00:00:00Z")

</div>

Ah I see and then the exported scene contains PostProcessing and fails then? Does it work without the Volume component?

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/11 "2023-07-24T00:00:00Z")

</div>

I will try

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/12 "2023-07-24T00:00:00Z")

</div>

Thanks

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/13 "2023-07-24T00:00:00Z")

</div>

The error disappear, and it seems that I can get different canvas

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/14 "2023-07-24T00:00:00Z")

</div>

I need to verify if the canvas works well

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/15 "2023-07-24T00:00:00Z")

</div>

Ok - so the problem is caused by the Volume component 🤔

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/16 "2023-07-24T00:00:00Z")

</div>

Ok it works correctly, the others errors come from my scripts

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/17 "2023-07-24T00:00:00Z")

</div>

You mean with the Volume component it also works now?

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 24, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/18 "2023-07-24T00:00:00Z")

</div>

No

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [July 25, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/19 "2023-07-25T00:00:00Z")

</div>

The Volume component don’t work with multiple instances of needle canvas

_by user 224464722878005248_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [July 25, 2023, 12:00am UTC](https://forum.needle.tools/t/duplicate-needle-engine-generate-bug/1245/20 "2023-07-25T00:00:00Z")

</div>

Thanks for the clarification! I added a task for it 🙂