babel-loader can't deal with multiline string? - babeljs

Question

Running babel-loader from create-react-app, seeing the following error from the #react-three/drei module:
Failed to compile.
./node_modules/#react-three/drei/core/softShadows.js 11:40
Module parse failed: Unexpected token (11:40)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| rings = 11
| } = {}) => `#define LIGHT_WORLD_SIZE ${size}
> #define LIGHT_FRUSTUM_WIDTH ${frustrum ?? frustum}
| #define LIGHT_SIZE_UV (LIGHT_WORLD_SIZE / LIGHT_FRUSTUM_WIDTH)
| #define NEAR_PLANE ${near}
That just looks like a multiline string to me, so I'm not sure why the loader would be choking on it. Here's a more complete look at the module that's failing to be loaded:
// node_modules\#react-three\drei\core> cat .\softShadows.js
import * as THREE from 'three';
const pcss = ({
frustrum,
frustum = 3.75,
size = 0.005,
near = 9.5,
samples = 17,
rings = 11
} = {}) => `#define LIGHT_WORLD_SIZE ${size}
#define LIGHT_FRUSTUM_WIDTH ${frustrum ?? frustum}
#define LIGHT_SIZE_UV (LIGHT_WORLD_SIZE / LIGHT_FRUSTUM_WIDTH)
#define NEAR_PLANE ${near}
#define NUM_SAMPLES ${samples}
#define NUM_RINGS ${rings}
#define BLOCKER_SEARCH_NUM_SAMPLES NUM_SAMPLES
#define PCF_NUM_SAMPLES NUM_SAMPLES
vec2 poissonDisk[NUM_SAMPLES];
void initPoissonSamples(const in vec2 randomSeed) {
float ANGLE_STEP = PI2 * float(NUM_RINGS) / float(NUM_SAMPLES);
float INV_NUM_SAMPLES = 1.0 / float(NUM_SAMPLES);
float angle = rand(randomSeed) * PI2;
float radius = INV_NUM_SAMPLES;
float radiusStep = radius;
for (int i = 0; i < NUM_SAMPLES; i++) {
poissonDisk[i] = vec2(cos(angle), sin(angle)) * pow(radius, 0.75);
radius += radiusStep;
angle += ANGLE_STEP;
}
}
float penumbraSize(const in float zReceiver, const in float zBlocker) { // Parallel plane estimation
return (zReceiver - zBlocker) / zBlocker;
}
float findBlocker(sampler2D shadowMap, const in vec2 uv, const in float zReceiver) {
float searchRadius = LIGHT_SIZE_UV * (zReceiver - NEAR_PLANE) / zReceiver;
float blockerDepthSum = 0.0;
int numBlockers = 0;
for (int i = 0; i < BLOCKER_SEARCH_NUM_SAMPLES; i++) {
float shadowMapDepth = unpackRGBAToDepth(texture2D(shadowMap, uv + poissonDisk[i] * searchRadius));
if (shadowMapDepth < zReceiver) {
blockerDepthSum += shadowMapDepth;
numBlockers++;
}
}
if (numBlockers == 0) return -1.0;
return blockerDepthSum / float(numBlockers);
}
float PCF_Filter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius) {
float sum = 0.0;
for (int i = 0; i < PCF_NUM_SAMPLES; i++) {
float depth = unpackRGBAToDepth(texture2D(shadowMap, uv + poissonDisk[ i ] * filterRadius));
if (zReceiver <= depth) sum += 1.0;
}
for (int i = 0; i < PCF_NUM_SAMPLES; i++) {
float depth = unpackRGBAToDepth(texture2D(shadowMap, uv + -poissonDisk[ i ].yx * filterRadius));
if (zReceiver <= depth) sum += 1.0;
}
return sum / (2.0 * float(PCF_NUM_SAMPLES));
}
float PCSS(sampler2D shadowMap, vec4 coords) {
vec2 uv = coords.xy;
float zReceiver = coords.z; // Assumed to be eye-space z in this code
initPoissonSamples(uv);
float avgBlockerDepth = findBlocker(shadowMap, uv, zReceiver);
if (avgBlockerDepth == -1.0) return 1.0;
float penumbraRatio = penumbraSize(zReceiver, avgBlockerDepth);
float filterRadius = penumbraRatio * LIGHT_SIZE_UV * NEAR_PLANE / zReceiver;
return PCF_Filter(shadowMap, uv, zReceiver, filterRadius);
}`;

Answer 1

Fixed this issue by downgrading drei to version 4, seems to be happening on all version after 5.0.0
The particular version I downgraded to is 4.1.2