Vite bundles development build of react-dom in production
See original GitHub issueDescribe the bug
I have scaffolded a project using create-vite-app
with the react-ts
template for an app which also uses material-ui and firebase. I ran yarn build
and everything seemed to go fine. I also added rollup-plugin-visualizer
to see what has been packed into the JS. When I saw the report, the development build of react-dom (aka @pika/react-dom/source.development.js
) was bundled in the file. The file is massive, and takes half of my production build. Here is a screenshot from the visualizer:
I also tried a transform from vite.config.ts
but no avail.
Reproduction
There is not a need of reproduction as this anomaly seems to be vite-agnostic. This behaviour will also happen on fresh react-ts
builds.
System Info
- required
vite
version: v1.0.0-rc.4 - required Operating System: Windows `10 x64
- required Node version: 12.18.0
- Optional:
- npm/yarn version yarn v1.22.5
- Installed
vue
version (fromyarn.lock
orpackage-lock.json
) none - Installed
@vue/compiler-sfc
version none
Logs (Optional if provided reproduction)
- Run
vite
orvite build
with the--debug
flag. - Provide the error log here.
$ "F:\Workspaces\Git Repos\lookahead\node_modules\.bin\vite" build --debug
vite v1.0.0-rc.4
vite:config env mode: production +0ms
vite:config env: {} +2ms
vite:config config resolved in 559ms +2ms
Building for production...
vite:build:resolve /src/main.tsx --> F:\Workspaces\Git Repos\lookahead\packages\web\src\main.tsx +0ms
[vite] warnings while transforming index.esm.80e55f8b.js with esbuild:
Comparison with -0 using the === operator will also match 0
768| for (var c = 0; c < a.length; c++) {
769| var d = a[c].indexOf("="), e = null;
770| if (0 <= d) {
| ^
771| var f = a[c].substring(0, d);
772| e = a[c].substring(d + 1);
[write] dist\_assets\index.b11b34d0.js 667.88kb, brotli: 175.40kb
[write] dist\_assets\Application.78afb0ca.js 22.37kb, brotli: 6.77kb
[write] dist\_assets\index.esm.80e55f8b.js 312.69kb, brotli: 68.83kb
[write] dist\_assets\style.15b188ee.css 0.34kb, brotli: 0.21kb
[write] dist\index.html 0.50kb, brotli: 0.22kb
Build completed in 43.41s.
Done in 44.63s.
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Dependency Pre-Bundling - Vite
Dependency pre-bundling only applies in development mode, and uses esbuild to convert dependencies to ESM. In production builds, @rollup/plugin-commonjs is ...
Read more >How To Set Up a React Project with Vite - DigitalOcean
This tutorial will scaffold a new React App using the Vite tool. You will create a basic app with a new component, CSS,...
Read more >Building a React Application with Vite - OpenReplay Blog
A build command that bundles your code with Rollup, preconfigured to output highly optimized static assets for production.
Read more >Vite 3.0 vs. Create React App: Comparison and migration guide
Vite doesn't need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand,...
Read more >Use Vite for React Apps instead of CRA - DEV Community
Vite uses the same bundle approach for production build with Rollup, as using unbundled native ESM in production will cause extra HTTP requests....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
yeah,I just got it a few minute ago, thanks
Have a look: https://vitejs.dev/config/#resolve-alias You’ll need to refactor
alias
object toresolve.alias