Can't apply a filter to a container

[phenomen]

What am I doing wrong? I have no issues with BlurFilter() but ColorMatrixFilter() does throw an error for some reason.

<script>
  import { Application, Container, Sprite } from "svelte-pixi";
  import * as PIXI from "pixi.js";

  let image = PIXI.Texture.from("/assets/image.png");
  let canvasX = 96;
  let canvasY = 96;

  const colorFilter = [new PIXI.filters.ColorMatrixFilter().grayscale()];
</script>

<Application width={canvasX} height={canvasY}>
  <Container filters={colorFilter}>
    <Sprite texture={image} scale={1} x={0} y={0} />
  </Container>
</Application>

Container.ts:681 Uncaught TypeError: Cannot read properties of undefined (reading 'enabled')
    at Container2.renderAdvanced (Container.ts:681:32)
    at Container2.render (Container.ts:642:18)
    at Container2.render (Container.ts:654:34)
    at Renderer2.render (Renderer.ts:516:23)
    at Ticker.tick_handler (Application.svelte? [sm]:151:29)
    at index.mjs:977:20
    at Array.forEach (<anonymous>)
    at index.mjs:976:31
    at Number.<anonymous> (Ticker.svelte? [sm]:64:9)
    at TickerListener2.emit (TickerListener.ts:68:25)

[mattjennings]

I think it's because grayscale() doesn't return the filter, so the array has an unexpected value (probably undefined).

I haven't used that filter myself, but try something like this:

const colorFilter = new PIXI.filters.ColorMatrixFilter()
colorFilter.grayscale()

const filters = [colorFilter]

[phenomen]

@mattjennings That works! Thank you.