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

Have you tried `npm isntall` again so all dependencies can be installed ? — Bao Huynh Lam, Feb 14 '22 at 06:13

score 3 · Answer 1 · answered Feb 14 '22 at 06:16

3

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.

answered Feb 14 '22 at 06:16

valerii15298

737
4
15

this now comes with new vite react installation by default. – StealthTrails Dec 05 '22 at 18:57

score 2 · Accepted Answer · answered Feb 14 '22 at 11:46

2

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

answered Feb 14 '22 at 11:46

Revan99

396
2
5
11

I've got exactly the same issue with react-custom-scrollbars-2. It's quite strange that Vite doesn't show just errors in dev mode. – Anatolii Olshevskyi Apr 16 '22 at 19:41

Build is not working in react using vite bundler

2 Answers2