Vite dev server warning: Sourcemap for "xxxx" points to missing source files #5562

johnson86tw commented 1 year ago

I am using the Vite configuration with this package written in README.md. When I started my app and go to the localhost url, the console reported two warning logs like this.

@niksy Could you provide me with some advice about how to solve this issue?

The following is my full vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import nodeStdlibBrowser from 'node-stdlib-browser'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import inject from '@rollup/plugin-inject'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // https://github.com/antfu/unplugin-auto-import#configuration
        AutoImport({
            dts: 'src/auto-import.d.ts',
            imports: ['vue', 'vue-router', 'pinia'],
            eslintrc: {
                enabled: true,
            },
        }),
        // https://github.com/antfu/unplugin-vue-components#configuration
        Components({
            dts: 'src/components.d.ts',
        }),
        // https://github.com/niksy/node-stdlib-browser#vite
        {
            ...inject({
                global: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'global'],
                process: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'process'],
                Buffer: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'Buffer'],
            }),
            enforce: 'post',
        },
    ],
    resolve: {
        alias: { '@': path.resolve(__dirname, 'src'), ...nodeStdlibBrowser },
    },
    optimizeDeps: {
        include: ['buffer', 'process'], // pre-bundle buffer and process
        esbuildOptions: {
            target: 'esnext', // Enable Big integer literals
        },
    },
    build: {
        target: 'esnext', // Enable Big integer literals
        commonjsOptions: {
            transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
        },
    },
})

Reference

P.S. this package is very helpful for dealing with polyfill on Vite, thanks a lot!

niksy commented 1 year ago

@chnejohnson have you tried using https://github.com/sodatea/vite-plugin-node-stdlib-browser? It uses this module as dependancy.

johnson86tw commented 1 year ago

@niksy Thanks, will take a close look

SimonVillage commented 1 year ago

@chnejohnson have you tried using https://github.com/sodatea/vite-plugin-node-stdlib-browser? It uses this module as dependancy.

throws some errors in combination with vite 4, see https://github.com/sodatea/vite-plugin-node-stdlib-browser/issues/4

niksy commented 1 year ago

This is related to @rollup/plugin-inject compatibility with Vite:

Will be resolved automatically when fixed upstream.

niksy / node-stdlib-browser

Vite dev server warning: Sourcemap for "xxxx" points to missing source files #5562 #25

Reference