babel-loader can't deal with multiline string?

Viewed 81

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);
}`;
1 Answers

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

Related