Can't load sourcemaps for node modules in renderer

[Jazcash]

The modules themselves are working fine, and the sourcemaps are there in their respective folders in node_modules, but the renderer can't load them:

DevTools failed to load source map: Could not load content for http://127.0.0.1:5173/resolve.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

I didn't see any existing issues about this so maybe something to do with my setup:

/* eslint-env node */

import vue from "@vitejs/plugin-vue";
import { join } from "path";
import { defineConfig } from "vite";
import renderer from "vite-plugin-electron-renderer";

const PACKAGE_ROOT = __dirname;

export default defineConfig({
    mode: process.env.MODE,
    root: PACKAGE_ROOT,
    envDir: process.cwd(),
    resolve: {
        alias: {
            "@": join(PACKAGE_ROOT, "src"),
            "!": join(PACKAGE_ROOT, "assets"),
            $: join(PACKAGE_ROOT, "../common"),
        },
    },
    base: "",
    server: {
        fs: {
            strict: true,
        },
    },
    build: {
        sourcemap: true,
        target: `es2022`,
        outDir: "dist",
        assetsDir: ".",
        rollupOptions: {
            input: join(PACKAGE_ROOT, "index.html"),
            output: {
                entryFileNames: "[name].cjs",
            },
        },
        emptyOutDir: true,
        reportCompressedSize: false,
        lib: {
            entry: "src/index.ts",
            formats: ["cjs"],
        },
    },
    plugins: [
        vue(),
        renderer({
            resolve() {
                return ["path", "fs", "stream", "os", "child_process", "node-fetch", "spring-map-parser", "tachyon-client", "sdfz-demo-parser", "octokit"];
            },
        }),
    ],
});

Any ideas how I can fix these, or otherwise hide the warnings?

[Jazcash]

Related: cawa-93/vite-electron-builder#386

[Jazcash]

Ok, I found that installing https://github.com/vite-plugin/vite-plugin-esmodule fixes most of these warnings

[caoxiemeihao]

renderer({
    resolve() {
        return ["path", "fs", "stream", "os", "child_process", "node-fetch", "spring-map-parser", "tachyon-client", "sdfz-demo-parser", "octokit"];
    },
}),

This will generate require('module-name'), maby require() can't load sourceMap properly.

[Jazcash]

Btw, I found that esmodule isn't actually fixing anything, it's just combining a lot of separate files into a single index.js, which means when I said "fixes most of these warnings", all that was happening is all warnings for the separate files are just getting combined like this:

Still no idea how to fix this unfortunately. Maybe the problem lies with vite-plugin-electron-renderer because it's not creating the .map.js files here?

[caoxiemeihao]

The next version will be generate .map.js into .vite-electron-renderer

[Jazcash]

vite-plugin-electron-renderer@0.10.3 now produces .map files for type: "module" entries, but not for type: "commonjs":

plugins: [
    vue(),
    renderer({
        nodeIntegration: true,
        optimizeDeps: {
            include: [
                { name: "path", type: "commonjs" },
                { name: "fs", type: "commonjs" },
                { name: "child_process", type: "commonjs" },
                { name: "stream", type: "commonjs" },
                { name: "os", type: "commonjs" },
                { name: "node-fetch", type: "module" },
                { name: "spring-map-parser", type: "commonjs" },
                { name: "better-sqlite3", type: "commonjs" },
                { name: "tachyon-client", type: "commonjs" },
                { name: "octokit", type: "commonjs" },
                { name: "axios", type: "commonjs" },
            ],
        },
    }),
    worker({
        nodeIntegrationInWorker: true,
    }),
]

Actually I'm not sure if it would work even if the .map files were there, because the .js files don't have sourcemap entries at the bottom like //# sourceMappingURL=index.cjs.map

[caoxiemeihao]

vite-plugin-electron/packages/electron-renderer/src/optimizer.ts

Lines 129 to 140 in 646eaa6

	function cjsBundling(args: {
	name: string
	require: string
	requireId: string
	}) {
	const { name, require, requireId } = args
	const { exports } = libEsm({ exports: Object.keys(cjs_require(requireId)) })
	const code = `const _M_ = require("${require}");\n${exports}`
	writeFile({ name, code })
	}

type: "module" or type: "commonjs" ends up being just a cjs conversion file wrapped in a layer, it is a new file and not converted from any file.