Get rid of "DevTools failed to load source map" when importing a glTF model

Questions
,
1

Hi! I was trying to import a glTF model using Babylon 5 and typescript. The import seems working but I get a ton of DevTools failed to load source map warnings in the web console like:

DevTools failed to load source map: Could not load content for webpack://node_modules/@babylonjs/core/index.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load source map: Could not load content for webpack://node_modules/@babylonjs/core/Maths/math.vector.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load source map: Could not load content for webpack://node_modules/@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

etc

How can I avoid these type of warnings?

This is my tsconfig.json file:

{
  "compilerOptions": {    
    "target": "es6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */    
    "module": "es6",                                /* Specify what module code is generated. */
     "rootDir": "./src",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */    
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */    
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */    
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

This is the webpack.config.js file:

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

module.exports = {
    entry: path.resolve(__dirname, 'src/index.ts'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js',
        clean: true,
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        static: path.resolve(__dirname, 'public'),
        hot: true,
        devMiddleware: {
            publicPath: '/',
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: path.resolve(__dirname, 'public/index.html'),
        })
    ],
    mode: 'development',
};

This is the index.ts file:

import {
    Engine,
    Scene,
    ArcRotateCamera,
    HemisphericLight,
    PointLight,
    MeshBuilder,
    Vector3,
    SceneLoader
} from '@babylonjs/core';

import '@babylonjs/loaders/glTF';

const init = async () => {
    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
    const engine = new Engine(canvas, true);

    const scene = new Scene(engine);

    const camera = new ArcRotateCamera(
        'camera',
        -Math.PI / 2,
        Math.PI / 2.5,
        15,
        new Vector3(0, 0, 0));

    camera.attachControl(canvas, true);

    const hemLight = new HemisphericLight('h-light', new Vector3(1, 1, 0), scene);ì    
    

    const model = await SceneLoader.ImportMeshAsync('', 'assets/models/microphone.gltf');    

    engine.runRenderLoop(() => scene.render());
};

(async () => {
    await init();
})();

typescript: 4.7.4
@babylonjs/core: 5.16.0
@babylonjs/loaders: 5.16.0

2

cc @RaananW

3

The sourcemaps provided by babylon are referenced by the provided (and copiled) js files in the package. you need to consume them if you want them to work correctly. The simplest (and TBH the only way I know) is using this - source-map-loader | webpack

2 Likes
4

Perfect, thank you!

1 Like