# Bug when add grafics children on container

**URL:** <https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151>\
**Category:** Phaser 3\
**Created:** [August 23, 2021, 8:46pm UTC](https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151 "2021-08-23T20:46:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdc\_marcelodias](https://avatars.discourse-cdn.com/v4/letter/m/c68b51/32.png) [@mdc\_marcelodias](https://phaser.discourse.group/u/mdc_marcelodias)\
**Post date:** [August 23, 2021, 8:46pm UTC](https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151/1 "2021-08-23T20:46:10Z")

</div>

- I created two squares with grafics and one another game object. Before I try add it to container.

**THIS GENERATE THE ERROR: gameObject.once is not a function**  
const container = this.add.container(0, 0, [grafics01, grafics02, ballObj])

**But, when a try this, everthing work correct**  
const container = this.add.container(0, 0, grafics01)  
container.add(grafics02)  
container.add(ballObj)

- I belive that is a bug, or am I used container wrong?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 23, 2021, 8:47pm UTC](https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151/2 "2021-08-23T20:47:46Z")

</div>

> [@mdc\_marcelodias](#):
>
> const container = this.add.container(0, 0, [grafics01, grafics02, ballObj])

Can you show all the code here?

---

<div class="post-metadata">

**Author:** ![mdc\_marcelodias](https://avatars.discourse-cdn.com/v4/letter/m/c68b51/32.png) [@mdc\_marcelodias](https://phaser.discourse.group/u/mdc_marcelodias)\
**Post date:** [August 25, 2021, 1:20pm UTC](https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151/3 "2021-08-25T13:20:48Z")

</div>

Here the most important part of full code, the original file has more than 500+ code lines XD.

```javascript
const createBackground = (context, config) => {
  const graphics = context.add.graphics();

  graphics.fillStyle(config.color, config.alfa || 1);

  graphics.fillRoundedRect(config.x || 0, config.y || 0, config.width, config.height, {
    tl: config.tl || config.corner || 0,
    tr: config.tr || config.corner || 0,
    bl: config.bl || config.corner || 0,
    br: config.br || config.corner || 0,
  });

  graphics.width = config.width;
  graphics.height = config.height;

  return graphics;
};

const createHeader = () => {
  this.headerBackground1 = createBackground(this.context, {
    color: this.config.body.background.color,
    width: this.headerSize.width,
    height: this.headerSize.height,
    tl: this.config.deleteTitle === true ? this.config.headers.background.tl : 0,
    tr: this.config.deleteTitle === true ? this.config.headers.background.tr : 0,
  });

  /**
   * There're an bug in phaser, it doesn't allow you to create container with grafics and game objects at the same time.
   * Aqui existe um bug no phaser, que não permite criar o container com graficos e objetos de jogo ao mesmo tempo.
   *
   * ERROR HERE:
   * const container = this.context.add.container(0, 0, [this.headerBackground1, this.headerBackground2, this.headerChildren])
   *
   * "this.headerChildren" is an container of phaser.
   */

  const container = this.context.add.container(0, 0, this.headerBackground1);

  container.add(this.headerBackground2);
  container.add(this.headerChildren);
  container.setSize(this.headerBackground1.width, this.headerBackground1.height);
  container.y = this.config.deleteTitle !== true ? this.titleContainer.height : 0;

  return container;
};

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 25, 2021, 2:39pm UTC](https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151/4 "2021-08-25T14:39:32Z")

</div>

> [@mdc\_marcelodias](#):
>
> gameObject.once is not a function

Can you break on this error and look the value in the debugger? Most likely you’ve passed a bad value somehow.

This doesn’t produce an error:

```js
this.add.container(0, 0, [this.add.graphics()]);

```

---

<div class="post-metadata">

**Author:** ![mdc\_marcelodias](https://avatars.discourse-cdn.com/v4/letter/m/c68b51/32.png) [@mdc\_marcelodias](https://phaser.discourse.group/u/mdc_marcelodias)\
**Post date:** [August 25, 2021, 8:56pm UTC](https://phaser.discourse.group/t/bug-when-add-grafics-children-on-container/10151/5 "2021-08-25T20:56:34Z")

</div>

I resolved the problem using spread operator.  
**Code with error:**  
const container = this.context.add.container(0, 0, [this.headerBackground1, this.headerBackground2, this.headerChildren])

**Solution:** \*  
const container = this.context.add.container(0, 0, [this.headerBackground1, this.headerBackground2, …this.headerChildren])

**Whats wrong?**  
The variable \<this.headerChildren\> is an array, and when I try this.add.container(0, 0, [[]]), array inside array, its generate an error on console.

**Error:**![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/81241704965fb1602d8e18478e4d64400ebe4ea4.png)