new URL("...", import.meta.url) works on dev, fails on production

[BenedictLang]

🐛 bug report

I am trying to run my ThreeJs App in production, but it fails with:
Uncaught TypeError: Failed to construct 'URL': Invalid URL

at the position where I create a link for my skybox background:
let skyboxImage = "" + new URL("../assets/textures/AllSkyFree_BlueSunsetSky-min.png", import.meta.url);
On the dev server it works, after production building it does not. But the desired image is output in my build folder.

🎛 Configuration (package.json)

{
  "name": "3D",
  "version": "1.0.0",
  "author": " - ",
  "description": " - ",
  "license": "MIT",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "prod": "parcel build --no-source-maps --dist-dir public/"
  },
  "staticFiles": {
    "staticOutPath": "./assets/models",
    "staticPath": "./assets/models"
  },
  "devDependencies": {
    "@parcel/css": "1.8.0",
    "@parcel/optimizer-data-url": "^2.4.1",
    "@parcel/packager-raw-url": "^2.4.1",
    "@parcel/transformer-css": "^2.4.1",
    "@parcel/transformer-inline-string": "^2.4.1",
    "@parcel/transformer-sass": "^2.4.1",
    "@parcel/transformer-webmanifest": "^2.4.1",
    "@parcel/service-worker": "^2.5.0",
    "parcel": "^2.4.1",
    "process": "^0.11.10",
    "sass": "^1.38.1",
    "three-orbit-controls": "^82.1.0"
  },
  "dependencies": {
    "npm": "^8.9.0",
    "three": "^0.139.2",
    "tween": "^0.9.0"
  }
}

.parcelrc

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

🤔 Expected Behavior

Should find the relative URL just like it does in the dev build.

😯 Current Behavior

Error says unvalid url

Uncaught TypeError: Failed to construct 'URL': Invalid URL

Build file:

....
!function () {
    ty = new a.Scene, my();
    let t = "" + new URL(fy);
    const e = (new a.TextureLoader).load(t);
    e.magFilter = a.LinearFilter, e.minFilter = a.LinearFilter;
    const n = a.ShaderLib.equirect, r = new a.ShaderMaterial({
        fragmentShader: n.fragmentShader,
        vertexShader: n.vertexShader,
        uniforms: n.uniforms,
        depthWrite: !1,
        side: a.BackSide
    });
}

....

var fy;
fy = new URL(s("dRo73").resolve("jdxFE"), import.meta.url).toString();

💁 Possible Solution

I have this texture/image in my assets folder, maybe I should include them in the static file path?

💻 Code Sample

Here the short form of the file:

import * as THREE from 'three';

/*================================== Instantiation ==================================*/
export const canvas = document.getElementById('canvas');

let camera, scene, renderer;

let bgMesh;

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
};


init();
gameLoop();


/*================================== SETUP ==================================*/
/**
 * Scene setup
 * @type {Scene}
 */
function init() {
    scene = new THREE.Scene();

    /**
     * Skybox background
     */
    let skyboxImage = "" + new URL("../assets/textures/AllSkyFree_BlueSunsetSky-min.png",
        import.meta.url);
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(
        skyboxImage,
    );
    texture.magFilter = THREE.LinearFilter;
    texture.minFilter = THREE.LinearFilter;

    const shader = THREE.ShaderLib.equirect;
    const bgMaterial = new THREE.ShaderMaterial({
        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: shader.uniforms,
        depthWrite: false,
        side: THREE.BackSide,
    });
    bgMaterial.uniforms.tEquirect.value = texture;
    const plane = new THREE.BoxBufferGeometry(1, 1, 1);
    bgMesh = new THREE.Mesh(plane, bgMaterial);
    scene.add(bgMesh);

    /**
     * Camera setup
     * @type {PerspectiveCamera}
     */
    camera = new THREE.PerspectiveCamera(
        45,
        sizes.width / sizes.height,
        0.1,
        10000
    );
    camera.position.x = -10;
    camera.position.y = 10;
    camera.position.z = -8;
    scene.add(camera);
    

    /**
     * Scene Content
     */
    let fbxModelURL = "" + new URL( "../assets/models/fbxTest/Modern_house.FBX",
        import.meta.url );
const fbxLoader = new FBXLoader()
fbxLoader.load(
    fbxModelURL,
    (object) => {
        let scaleFactor = .007;
        object.scale.set(scaleFactor, scaleFactor, scaleFactor)
        scene.add(object)
        fbxModel = object;
    },
    (xhr) => {
        console.info(`${((xhr.loaded / xhr.total) * 100).toFixed(2)}% of model loaded`)
    },
    (error) => {
        console.log(error)
    }
)


    /**
     * Renderer
     * @type {WebGLRenderer}
     */
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( sizes.width, sizes.height );

}

//draw Scene
function render() {
    bgMesh.position.copy(camera.position);
    renderer.render(scene, camera);
}

//run game loop (update, render, repeat)
function gameLoop() {
    requestAnimationFrame( gameLoop);
    //update();
    render();
}

🌍 Your Environment

Software	Version(s)
Parcel	v2.4.1
npm	v8.9.0
Operating System	Win11 / MacOS

[h4de5]

as a do have the same issue - possible duplicate of #7633 and #7643

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.