2 ms·

I was really happy to discover Vite so I don't have to change the way my whole app works with Next.js. Here are the differences I found from Create React App:

I was really happy to discover Vite so I don't have to change the way my whole app works with Next.js. Here are the differences I found from Create React App: * It does not have the overlay that warns you about eslint errors in your app; you can bring that back with the `vite-plugin-checker` plugin if you want. * Running `vite` in IntelliJ with `npm run dev` will not show console logs in the IDE[1]. You don't need any of the solutions in that thread, though: just use a debug config. * You can add TypeScript types to your env vars with vite-env.d.ts. * Imports have to end in .tsx apparently: `import Foo from './components/Foo.tsx';` * No process.env: Since your code is running in the browser rather than on a Node.js server, there is no process env var. * Network tab shows a request for every file on initial load: This is because each file is treated as an ESM module for hot reload. I couldn't figure out how to suppress these messages. It won't happen in production since they still use a bundler in prod to save network round trips. 1: https://ww.reddit.com/r/react/comments/zo6nay/how_can_i_view_console_messages_in_terminal_when/ https://ww.reddit.com/r/react/comments/zo6nay/how_can_i_view...

yurishimo 2y ago
Regarding this point - Imports have to end in .tsx apparently: `import Foo from './components/Foo.tsx';` - since Vite uses ESM, each file that requires transpiling of some sort needs to contain a file extension so Vite knows to pass it off to some other service that converts it into plain JS before being sent to the browser. The same is/was true for `.vue` files as well. The webpack loaded had some config that would figure it out for you, but Vite requires that you import the component with the extension. Personally, I quite enjoy this change because now it's very explicit what file is being loaded and it opens up the possibility to load a JS file and some other file with the same name. Granted, small problem to solve, but in a huge project, it's not uncommon to see duplicate file names with different extensions sometimes.
isleyaardvark 2y ago
I'm pretty sure @vitejs/plugin-react allows you to leave off the file extension for imports. (I say this because I'm looking at a working Vite project with no file extensions, and that's one of the few differences with an out-of-the-box setup.)

yurishimo 2y ago

Regarding this point - Imports have to end in .tsx apparently: `import Foo from './components/Foo.tsx';` - since Vite uses ESM, each file that requires transpiling of some sort needs to contain a file extension so Vite knows to pass it off to some other service that converts it into plain JS before being sent to the browser. The same is/was true for `.vue` files as well. The webpack loaded had some config that would figure it out for you, but Vite requires that you import the component with the extension. Personally, I quite enjoy this change because now it's very explicit what file is being loaded and it opens up the possibility to load a JS file and some other file with the same name. Granted, small problem to solve, but in a huge project, it's not uncommon to see duplicate file names with different extensions sometimes.

isleyaardvark 2y ago

I'm pretty sure @vitejs/plugin-react allows you to leave off the file extension for imports. (I say this because I'm looking at a working Vite project with no file extensions, and that's one of the few differences with an out-of-the-box setup.)