glslify Cannot Find The Method I'm importing

Question

I'm having an issue where my method multiColourLerp Cannot be found when I import it from my utils file. I know that shaders usually don't reuse code across files but for the sake of maintainability I would like to be able to import functions to use in my shaders. Supposedly this can be done according to the glslify docs. I can see in glsl canvas It is not importing my method

ERROR (multiColourLerp) no matching overloaded function found

Here is my shader

#version 300 es

#pragma glslify: rotateUV = require("../utils.glsl", rotateUV)
#pragma glslify: multiColourLerp = require("../utils.glsl", multiColourLerp)
#pragma glslify: UV_CENTER = require("../utils.glsl", UV_CENTER)
#pragma glslify: DEFAULT_BRIGHTNESS = require("../utils.glsl", DEFAULT_BRIGHTNESS)
#pragma glslify: UV_ROTATION_INTENSITY = require("../utils.glsl", UV_ROTATION_INTENSITY)
#pragma glslify: UV_SCALE_MIN = require("../utils.glsl", UV_SCALE_MIN)
#pragma glslify: UV_SCALE_MAX = require("../utils.glsl", UV_SCALE_MAX)


uniform float time;
uniform float brightness;
in vec2 vUv;
out vec4 fragColor;

// Local constants
const vec2 RADIAL_CENTER = vec2(0.5, -0.2);
const int AMAZING_COLOUR_COUNT = 6;
const float COLOUR_STEPS = 6.0;
const float ANIMATION_SPEED = 0.1;
const float ROTATION_SPEED = 2.0;

const vec3 AMAZING_COLOURS[6] = vec3[6](
    vec3(0.722, 0.153, 0.988), // Vibrant purple
    vec3(0.173, 0.565, 0.988), // Electric blue
    vec3(0.722, 0.992, 0.200), // Lime green
    vec3(0.996, 0.784, 0.216), // Golden yellow
    vec3(0.992, 0.094, 0.573), // Hot pink
    vec3(0.722, 0.153, 0.988) // Vibrant purple
);

void main() {
    // Center point for radial gradient with optimized calculations
    float dist = distance(vUv, RADIAL_CENTER);
    
    float t = fract(dist - time * ANIMATION_SPEED);
    vec3 finalColor = multiColourLerp(t, AMAZING_COLOUR_COUNT, AMAZING_COLOURS);
    
   // etc

Utils File:

#ifndef SHADER_UTILS_GLSL
#define SHADER_UTILS_GLSL

// Mathematical constants
const float PI = 3.14159265359;
const float TWO_PI = 6.28318530718;
const float DEGREES_TO_RADIANS = PI / 180.0;
const vec3 LUMINANCE_FACTORS = vec3(0.2126, 0.7152, 0.0722);

// Animation constants
const float DEFAULT_ANIMATION_SPEED = 0.1;
const float DEFAULT_UV_SCALE = 2.0;

// colour adjustment constants
const float DEFAULT_GAMMA = 2.95;
const float DEFAULT_CONTRAST = 2.0;
const float DEFAULT_BRIGHTNESS = 0.4;
const float DEFAULT_SATURATION = 0.8;

// Blend mode constants
const float SOFT_LIGHT_INTENSITY = 0.5;
const float HARD_LIGHT_INTENSITY = 0.5;
const float MIX_RATIO = 0.5;

// UV manipulation constants
const vec2 UV_CENTER = vec2(0.5);
const float UV_SCALE_MIN = 1.05;
const float UV_SCALE_MAX = 1.1;
const float UV_ROTATION_INTENSITY = 0.0087; // ±0.5 degrees

// Sunpillar effect constants
const float SUNPILLAR_DEFAULT_SPEED = 6.0;     // Default animation speed
const int SUNPILLAR_COLOUR_COUNT = 6;           // Number of colours in the palette
const float SUNPILLAR_CYCLE_LENGTH = 1.0;      // Length of one complete cycle

// Standard colour palettes for different card effects
const vec3 SUNPILLAR_COLOURS[SUNPILLAR_COLOUR_COUNT] = vec3[SUNPILLAR_COLOUR_COUNT](
    vec3(0.70, 0.30, 0.30), // Rich red
    vec3(0.40, 0.50, 0.80), // Royal blue
    vec3(0.30, 0.55, 0.55), // Teal
    vec3(0.25, 0.60, 0.30), // Emerald green
    vec3(0.70, 0.35, 0.75), // Deep purple
    vec3(0.70, 0.30, 0.30)  // Rich red (repeated for smooth loop)
);

/*
 * Interpolates between multiple colours using a normalized t value
 * @param t - Interpolation value (0 to 1)
 * @param totalSteps - Total number of colour steps
 * @param colours - Array of colours to interpolate between
 * @return vec3 - Interpolated colour
 */
vec3 multiColourLerp(float t, const float totalSteps, const vec3 colours[6]) {
    float step = 1.0 / (totalSteps - 1.0);
    int i = int(t / step);
    float localT = fract(t / step);
    return mix(colours[i], colours[i + 1], localT);
}

// more helper methods here...


/* Updated export block, replacing any previous export directives */
#pragma glslify: export(getSunpillarColours)
#pragma glslify: export(multiColourLerp)
#pragma glslify: export(rotateUV)
#pragma glslify: export(animatedTexture)
#pragma glslify: export(luminance)
#pragma glslify: export(adjustContrast)
#pragma glslify: export(test)
#pragma glslify: export(DEFAULT_ANIMATION_SPEED)
#pragma glslify: export(SUNPILLAR_DEFAULT_SPEED)
#pragma glslify: export(DEGREES_TO_RADIANS)
#pragma glslify: export(UV_CENTER)
#pragma glslify: export(TWO_PI)
#pragma glslify: export(DEFAULT_BRIGHTNESS)
#pragma glslify: export(DEFAULT_CONTRAST)
#pragma glslify: export(MIX_RATIO)
#pragma glslify: export(DEFAULT_GAMMA)

#endif

Why is this not working?

I am trying to write shaders to apply them to a mesh in threejs but while trying to debug I can see glslCanvas throwing this error.