1

I am in the process of migrating my application from Webpack to Vite. For the most part, everything has been smooth, but I've encountered an issue with react-dnd. Interestingly, this problem only arises when I run my app locally.

Below is the configuration I'm using in vite.config.ts:

export default defineConfig({
  plugins: [react(), tsconfigPaths(), splitVendorChunkPlugin(), mkcert({
    hosts: ['localhost','127.0.0.1'],
    savePath: './.cache/certs',
  })],
  server: {
    proxy: {
      '/www': {
        target: 'https://localhost:5000',
        changeOrigin: true,
        secure: false,
      },
    },
    open: false,
    https: true,
    watch: {
      ignored: ['**/.env', '**/.env.*', '**/coverage', '**/tsconfig.*', 'src/server/**/*'],
    },
  },
  define: {
    'window.global': {},
    'process.env': {},
  },
  build: {
    sourcemap: false,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    outDir: 'build',
  },
});

Any insights or suggestions to fix the issue with react-dnd would be greatly appreciated!

Tasos Tsournos
  • 314
  • 2
  • 9

1 Answers1

0

For those encountering a similar issue, I found a solution in this Stack Overflow answer plus removing 'process.env': {}.

You can modify your configuration like this:

define: {
      global: 'window',
}

This adjustment resolved the problem for me.

Tasos Tsournos
  • 314
  • 2
  • 9