snoise3' : no matching overloaded function found with Next.js and Webpack - next.js

Question

Having issues loading glsl shaders in a Next.js project. More specifically, when attempting to load the glslify function 'snoise3', I am prompted with the following error message:
WARNING: 0:64: 'glslify' : unrecognized pragma ERROR: 0:73: 'snoise3' : no matching overloaded function found
I've seem similar issues around the internet but can't seem to track a solution that works in my project.
Here's the CodeSandbox I am modeling off of: https://codesandbox.io/s/r3f-wavey-image-shader-j4uwl?file=/src/App.js
For reference, here's my three.js object code (including glsl code):
import * as THREE from "three";
import React, { useRef, Suspense } from "react";
import { Canvas, extend, useFrame, useLoader } from "#react-three/fiber";
import { shaderMaterial } from "#react-three/drei";
const glslify = require("glslify");
const WaveShaderMaterial = shaderMaterial(
// Uniform
{
uTime: 0,
uColor: new THREE.Color(0.0, 0.0, 0.0),
uTexture: new THREE.Texture(),
},
// Vertex Shader
glslify`precision mediump float;
varying vec2 vUv;
varying float vWave;
uniform float uTime;
#pragma glslify: snoise3 = require(glsl-noise/simplex/3d.glsl);
void main() {
vUv = uv;
vec3 pos = position;
float noiseFreq = 2.0;
float noiseAmp = 0.4;
vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
pos.z += snoise3(noisePos) * noiseAmp;
vWave = pos.z;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}`,
// Fragment Shader
glslify`precision mediump float;
uniform vec3 uColor;
uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;
varying float vWave;
void main() {
float wave = vWave * 0.2;
vec3 texture = texture2D(uTexture, vUv + wave).rgb;
gl_FragColor = vec4(texture, 1.0);
}`
);
extend({ WaveShaderMaterial });
const Wave = () => {
const ref = useRef();
useFrame(({ clock }) => (ref.current.uTime = clock.getElapsedTime()));
const [image] = useLoader(THREE.TextureLoader, [
"https://i.imgur.com/Fc5Rwr6.png",
]);
return (
<mesh>
<planeBufferGeometry args={[0.5, 0.5, 16, 16]} />
<waveShaderMaterial
wireframe
uColor={"orange"}
ref={ref}
uTexture={image}
GLSLVersion={THREE.GLSL3}
/>
</mesh>
);
};
const GridWaveObject = () => {
return (
<Canvas camera={{ fov: 12, position: [1, 3, 5] }}>
<Suspense fallback={null}>
<Wave />
</Suspense>
</Canvas>
);
};
export default GridWaveObject;
and also my next.config.js:
/** #type {import('next').NextConfig} */
const webpack = require("webpack");
const nextConfig = {
reactStrictMode: true,
webpack(config) {
// Perform customizations to webpack config
config.module.rules.push({
// shader import support
test: /\.glsl$/,
use: [
{
loader: "ify-loader",
options: {
name: "dist/[path][name].[ext]",
},
},
"webpack-glsl-loader",
],
});
return config;
},
};
module.exports = nextConfig;
I originally tried just using the babel configuration, but this failed pretty quick because I'm using next/font. I've also tried using all different types of loaders (glsl-loader, ify-loader, webpack-glsl-loader, and more), extracting the glsl code to their own files and importing, as well as all different types of next configs. I'm stumped here as I believe I've tried everything I can.
If anyone has experience using shaders with #react-three/fiber or #react-three/drei with Next.js, I'd appreciate any solution that can help me move forward :)