Hot reload + working sourcemaps possible?

🌵 Needle Engine
1

Hi guys, I’m currently trying to get a breakpoint to hit in one of my own .ts files. It only really works after disabling hot reload by configuring vite.config.js like so:

needlePlugins(command, needleConfig, {allowHotReload: false}),

Now line mappings and local variable inspection and so on, everything works. An actual debugging experience.

But of course the hot reload feature is great to have, too :slight_smile:

Do you see a way for sourcemaps and hot reload working nicely together somehow? At least for the original (non-hot-reloaded) source this would be of great help.

2

Hi Krizzl0r,

To achieve both hot reload and sourcemaps functionality, you may want to ensure the following configurations in your vite.config.js:

  1. Set allowHotReload to true while properly managing sourcemaps.
  2. Ensure sourcemaps are enabled in Vite by adding the appropriate configuration for build options.

Here’s an example configuration:

import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';

export default defineConfig(async ({ command }) => {
    const { needlePlugins, useGzip, loadConfig } = await import("@needle-tools/engine/plugins/vite/index.js");
    const needleConfig = await loadConfig();
    return {
        base: "./",
        plugins: [
            useGzip(needleConfig) ? viteCompression({ deleteOriginFile: true }) : null,
            needlePlugins(command, needleConfig, { allowHotReload: true }), // Set allowHotReload to true
        ],
        server: {
            https: false,
            strictPort: true,
            port: 1107,
        },
        build: {
            outDir: "./dist",
            emptyOutDir: true,
            sourcemap: true,    // Enable sourcemaps
            keepNames: true,
        }
    }
});

Make sure that your TypeScript files are properly compiled with sourcemaps, which should allow for debugging without disabling hot reload.

In case you continue experiencing issues with sourcemaps during hot reload, I suggest that you review the configurations, particularly for any console or network errors that may impact loading. Adjust debug levels for more insights into the HMR process by logging any pertinent changes to see how they might interact during the reload process (see the documentation) (see the documentation).

If you have specific error messages or issues, please provide those for further assistance.

1 replies left - Get a PRO license for more AI replies.
thread_NrZgyjaF6kV2VjPKukpgzltN
Reply to this message to continue the conversation