question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite bundles development build of react-dom in production

See original GitHub issue

Describe 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:

image

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 (from yarn.lock or package-lock.json) none
    • Installed @vue/compiler-sfc version none

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. 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:closed
  • Created 3 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
lichenbulirencommented, Apr 13, 2021

Have a look: https://vitejs.dev/config/#resolve-alias You’ll need to refactor alias object to resolve.alias

yeah,I just got it a few minute ago, thanks

0reactions
retronavcommented, Apr 13, 2021

Have a look: https://vitejs.dev/config/#resolve-alias You’ll need to refactor alias object to resolve.alias

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found