Symbol.tsx: undefined is not a constructor (evaluating 'new _simplexNoise.default(i + "-" + j)')

construct.js infraction, coupled in with the source at Symbol.tsx, likely.

Symbol.tsx import type { SkFont, Vector, SkiaValue, SkiaClockValue, } from "@shopify/react-native-skia"; import { interpolate, dist, useComputedValue, vec, Group, Text, } from "@shopify/react-native-skia"; import React from "react"; import SimplexNoise from "simplex-noise"; import { useWindowDimensions } from "react-native"; import { FG } from "./Theme"; export const COLS = 5; export const ROWS = 10; const DIGITS = new Array(10).fill(0).map((_, i) => `${i}`); const F = 0.0008; const R = 125; const A = 10; interface SymbolProps { i: number; j: number; font: SkFont; pointer: SkiaValue<Vector>; clock: SkiaClockValue; } export const Symbol = ({ i, j, font, pointer, clock }: SymbolProps) => { const { width, height } = useWindowDimensions(); const SIZE = { width: width / COLS, height: height / ROWS }; const x = i * SIZE.width; const y = j * SIZE.height; const noise = new SimplexNoise(`${i}-${j}`); const text = DIGITS[Math.round(Math.random() * 9)]; const [symbolWidth] = font.getGlyphWidths(font.getGlyphIDs(text)); const origin = vec(x + SIZE.width / 2, y + SIZE.height / 2); const transform = useComputedValue( () => [ { scale: interpolate( dist(pointer.current, origin), [0, R], [1.25, 0.25], { extrapolateLeft: "clamp", extrapolateRight: "clamp", } ), }, ], [pointer] ); const dx = useComputedValue(() => { const d = A * noise.noise2D(x, clock.current * F); return origin.x - symbolWidth / 2 + d; }, [clock]); const dy = useComputedValue(() => { const d = A * noise.noise2D(y, clock.current * F); return origin.y + font.getSize() / 2 + d; }, [clock]); return ( <Group transform={transform} origin={origin}> <Text text={text} x={dx} y={dy} font={font} color={FG} /> </Group> ); }; Severance.tsx import { Canvas, Fill, Group, useClockValue, useFont, useTouchHandler, useValue, } from "@shopify/react-native-skia"; import React from "react"; import { useWindowDimensions } from "react-native"; import { CRT } from "./CRT"; import { COLS, ROWS, Symbol } from "./Symbol"; import { BG } from "./Theme"; const rows = new Array(COLS).fill(0).map((_, i) => i); const cols = new Array(ROWS).fill(0).map((_, i) => i); export const Severance = () => { const { width, height } = useWindowDimensions(); const clock = useClockValue(); const font = useFont(require("./SF-Mono-Medium.otf"), height / ROWS); const pointer = useValue({ x: width / 2, y: height / 2 }); const onTouch = useTouchHandler({ onActive: (pt) => { pointer.current = pt; }, }); if (font === null) { return null; } return ( <Canvas style={{ flex: 1 }} onTouch={onTouch} debug> <CRT> <Group> <Fill color={BG} /> {rows.map((_i, i) => cols.map((_j, j) => { return ( <Symbol key={`${i}-${j}`} i={i} j={j} font={font} pointer={pointer} clock={clock} /> ); }) )} </Group> </CRT> </Canvas> ); }; CRT.tsx import { Group, Skia, RuntimeShader, usePaintRef, Paint, vec, } from "@shopify/react-native-skia"; import type { ReactNode } from "react"; import React from "react"; import { useWindowDimensions } from "react-native"; const source = Skia.RuntimeEffect.Make(` uniform shader image; uniform vec2 resolution; vec2 curve(vec2 uv) { // as we near the edge of our screen apply greater distortion using a sinusoid. float curvature = 6.0; uv = uv * 2.0 - 1.0; vec2 offset = abs(uv.yx) / curvature; uv = uv + uv * offset * offset; uv = uv * 0.5 + 0.5; return uv; } vec4 scanLine(float x) { float f = 900; float opacity = 0.25; float intensity = ((0.5 * sin(x * f)) + 0.5) * 0.9 + 0.1; return vec4(vec3(pow(intensity, opacity)), 1.0); } half4 main(float2 xy) { vec2 uv = xy/resolution; vec2 curvedUV = curve(vec2(uv.x, uv.y)); vec4 baseColor = image.eval(curvedUV * resolution); baseColor *= scanLine(curvedUV.x); baseColor *= scanLine(curvedUV.y); baseColor *= vec4(vec3(1.5), 1.0); if (curvedUV.x < 0.0 || curvedUV.y < 0.0 || curvedUV.x > 1.0 || curvedUV.y > 1.0){ return vec4(0.0, 0.0, 0.0, 1.0); } else { return baseColor; } } `)!; interface CRTProps { children: ReactNode | ReactNode[]; } export const CRT = ({ children }: CRTProps) => { const paint = usePaintRef(); const { width, height } = useWindowDimensions(); return ( <> <Paint ref={paint}> <RuntimeShader source={source} uniforms={{ resolution: vec(width, height) }} /> </Paint> <Group layer={paint}>{children}</Group> </> ); }; index.ts export * from "./Severance"; 

Issue occurs in Symbol.tsx at const noise = SimplexNoise declaration, please help.