Build is not working in react using vite bundler

Question

I use web-pack before and wanted to change it to vite I copied all the file from the web-pack version to the vite version when I issue yarn dev it work but we I build it and run the build with serve dist it give me this error on the browser and it won't render any thing

Answer 1

You need to use this config, (take a look at @vitejs/plugin-react which you probably need to install)

vite.config.js:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default ({ mode }) => {
  return defineConfig({
    plugins: [
      react(),
    ],
  });
};

The thing is that vite does not import React by default into jsx components, so you need to do it manually in every component or use this plugin.

Answer 2

the problem was with a react library called react-custom-scrollbars