Inspector v2 not importing properly when using Vite in dev mode

Bugs
,
4

The matter is that the resolving of this issue depends on a bundler and its settings.

There may be other issues, for example, if one uses Webpack instead of Vite/Rollup.

That said, there shouldn’t be any issues when setttings are correct.

The repo at GitHub - kv-bh/babylon-inspector-test · GitHub is quite non-usual setup which also has some default port issues. Anyway, here is the corrected vite.config.mjs


import {defineConfig} from 'vite';

import {resolve} from 'node:path';




export default defineConfig(({mode}) => ({

  root: resolve('.'),

  cacheDir: resolve(mode === 'optimized' ? 'temp/optimized' : 'temp/default'),

  base: './',

  server: {

    hmr: false,

    host: '0.0.0.0',

    port: 9000 + (mode === 'optimized' ? 2 : 1),

    strictPort: true,

    open: true,

    fs: {

      strict: true,

    },

  },

  optimizeDeps: {

    force: true,

    include: [

      'react',

      'react-dom',

      'react-dom/client',

      'react-dom/server',

      'react/jsx-runtime',

      'react/jsx-dev-runtime',

      'scheduler',

      'use-sync-external-store/shim',

      'use-sync-external-store/shim/with-selector',

    ],

    exclude: mode === 'optimized' ? [] : [

      '@babylonjs/addons',

      '@babylonjs/core',

      '@babylonjs/gui',

      '@babylonjs/gui-editor',

      '@babylonjs/inspector',

      '@babylonjs/ktx2decoder',

      '@babylonjs/loaders',

      '@babylonjs/materials',

      '@babylonjs/post-processes',

      '@babylonjs/procedural-textures',

      '@babylonjs/serializers',

      'babylonjs-gltf2interface',

    ],

  },

  build: {

    outDir: resolve('temp/build'),

    emptyOutDir: true,

    minify: false,

    modulePreload: false,

    rollupOptions: {

      input: [

        resolve('index.html'),

      ],

      output: {

        entryFileNames: 'js/[name].js',

      },

    },

  },

}));

Currently for some reasons there are 2 Vite instances in dev mode.
With these changes the server at 9001 will work; server at 9002 will give error. It can be cured with proper port assigning.
Still I would recommend less exotic setup, like just npm create vite@latestor the recent npm create babylonjs - Babylon.js docs