How to set GENERATE_SOURCEMAP false in vite

Question

Hi I deploy my react using vite, however all the source code showing from debugger. I want to hide it and already follow the step:

1. add "build": "GENERATE_SOURCEMAP=false vite build",
2. using cross-env
3. and the last is try to set in vite config:

build: {
      outDir: 'build',
      chunkSizeWarningLimit: 1600,
      assetsDir: './',
      rollupOptions: {
        input: './src/index.jsx'
      },
      sourcemap: 'false'
    },
    sourcemap: {
      server: true,
      client: true,
    },

But all options not working.

Please see this image

I want source code not showing on debugger.

Answer 1

You have to disable source maps. Here's how you can do :

1. In your package.json, update the build script to include GENERATE_SOURCEMAP=false, like this :

"scripts": {
  "build": "GENERATE_SOURCEMAP=false vite build"
}

2. Then you have to install the cross-env package :

npm install --save-dev cross-env

3. THen use cross-env to set the environment variable in the build script :

"scripts": {
  "build": "cross-env GENERATE_SOURCEMAP=false vite build"
}

4. Finally, in your vite.config.js set the sourcemap option to false :

module.exports = {
  build: {
    sourcemap: false
  }
}

Don't forget to restart your server

Answer 2

You can disable sourcemap in vite.config.ts.

import { defineConfig } from "vite";

export default defineConfig({
  build: { sourcemap: false }
});