Weird "GET http://localhost:8080/assets/models/7...glb 404 error" in local server for loading gltf files in babylon JS

Question

I am trying to render Fox.glb file from here onto local dev server and seeing this error in console -

My directory structure (Fox.glb is inside 'scene' folder) -

My index.js -

import {Engine, SceneLoader, HemisphericLight, Vector3, ArcRotateCamera, Scene} from 'babylonjs';
 import 'babylonjs-loaders';

 // Import our glTF model.
 import gltf from '../scene/Fox.glb';

 // Create the engine and scene, which will consist of one light and the main camera.
 const canvas = document.getElementById('canvas');
 const engine = new Engine(canvas, true);
 const scene = new Scene(engine);
 const light = new HemisphericLight("HemiLight", new Vector3(0, 1, 0), scene);
 const camera = new ArcRotateCamera("camera1", 0, 1, 220, new Vector3(0, 20, 0), scene);
 camera.attachControl(canvas, false);

 // Load the glTF model and add it to the scene.
 SceneLoader.Append("/", gltf, scene);

 // Instruct the engine to resize when the window does.
 window.addEventListener('resize', () => engine.resize());

 // Start the engine's main render loop.
 engine.runRenderLoop(() => scene.render());

My webpack.config.js -

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const dist = path.resolve(__dirname, 'dist');
const src = path.resolve(__dirname, 'src');

module.exports = {
  entry: path.resolve(src, 'index.js'),
  output: {
    filename: '[name].[hash].js',
    path: dist
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.(glb|gltf)$/,
        use:
        [
          {
            loader: 'file-loader',
            options:
            {
              outputPath: 'assets/models/',
              esModule: false
            }
          }
        ]
      },
      {
        test: [/\.(bin)$/, /\.(jpg)$/, /\.(png)$/],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(src, 'index.html')
    }),
    new webpack.HotModuleReplacementPlugin(),
  ]
};

I don't see any compile errors, only console error. Here's compiler output -

> [email protected] start
> webpack-dev-server --mode development --devtool eval-source-map
     <w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.  <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/  <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.65:8080/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/  <i> [webpack-dev-server] Content not from webpack is served from '/Users/sagsrini/Documents/Strider-the-fox/BabylonJS-New/public' directory  (node:42081) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)  (Use `node --trace-deprecation ...` to show where the warning was created)  asset main.51a21013ffe78d982699.js 9.1 MiB [emitted] [immutable] (name: main)  asset assets/models/71405a1e9aa5fc375a4c32a3d650e4d2.glb 162 KiB [emitted] [immutable] [from: scene/Fox.glb] (auxiliary name: main)  asset index.html 1.09 KiB [emitted]  runtime modules 27 KiB 12 modules  modules by path ./node_modules/ 3.55 MiB    modules by path ./node_modules/webpack-dev-server/client/ 56.8 KiB 12 modules    modules by path ./node_modules/webpack/hot/*.js 4.3 KiB
        ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated]
        + 3 modules    modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
        ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
        + 3 modules    ./node_modules/babylonjs/babylon.js 3.24 MiB [built] [code generated]   ./node_modules/babylonjs-loaders/babylonjs.loaders.min.js 153 KiB [built] [code generated]    ./node_modules/ansi-html-community/index.js
    4.16 KiB [built] [code generated]    ./node_modules/events/events.js 14.5 KiB [built] [code generated]  ./src/index.js 905 bytes [built] [code generated]  ./scene/Fox.glb 96 bytes [built] [code generated]  webpack 5.67.0 compiled successfully in 1771 ms

When I try to access http://localhost:8080/assets/models/71405a1e9aa5fc375a4c32a3d650e4d2.glb, the browser downloads the file for me, so it can access the file.

Any idea why is it showing http://localhost:8080 twice?

GET http://localhost:8080/http://localhost:8080/assets/models/71405a1e9aa5fc375a4c32a3d650e4d2.glb 404 (Not Found)

Answer 1

Found out the issue. I had SceneLoader.Append with a "/", after taking it out, don't have any errors.

SceneLoader.Append("", gltf, scene);