parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.47k stars 2.27k forks source link

React app not working with tree shaking enabled #2859

Closed mturki closed 1 year ago

mturki commented 5 years ago

🐛 bug report

If i try to enable tree shaking (with --experimental-scope-hoisting)when building my typescript react project, nothing is displayed any more. And no error message either in build time nor in run time. Without the --experimental-scope-hoisting option, everything works well and my apps runs properly. It works as expected in development mode of course.

🎛 Configuration

index.jsx :

import React from "react"
import ReactDOM from "react-dom"

console.log("Coucou depuis tsx!")

ReactDOM.render(<p>Hello world</p>, document.getElementById("root"))

🤔 Expected Behavior

A typescript react app built with --experimental-scope-hoisting option runs the same way as a normal build

😯 Current Behavior

The app with --experimental-scope-hoisting and "sideEffects": false, options Built correctly without error but don't display on the browser. In addition, no errors are displayed in browser console

💁 Possible Solution

🔦 Context

Trying to minify my app to reduce bundle size.

💻 Code Sample

build with yarn build:shake i'm running it to test my build with spa-http-server : http-server --push-state in the build folder

🌍 Your Environment)

| Software | Version(s) | Parcel | 1.12.3 | Node | 11.8.0
| Yarn | 1.13.0
| spa-http-server | 0.9.0
| Operating System | macOS Mojave 10.14.3 (18D109)

mischnic commented 5 years ago

The first problem here is that

console.log("Coucou depuis tsx!");
{
    "sideEffects": false
}

produces an empty bundle.

But this is actually somewhat correct: https://github.com/stereobooster/package.json#sideeffects

Indicates that the package's modules have no side effects (on evaluation) and only expose exports. Your side effects (console.log) are removed.


As you've already said: with that line is removed, console.log works but somehow nothing is rendered. Works correctly with --no-minify though.

mturki commented 5 years ago

Ok, now i better understand the benefits (and in my case irrelevance) of the sideEffects flag. But that does not solve my rendering problem :-/. And with --no-minify, the final bundle size is... Bigger ^^

mischnic commented 5 years ago

But that does not solve my rendering problem, And with --no-minify, the final bundle size is big

Yes, that wasn't a workaround, just a finding.


Digging deeper:

https://github.com/parcel-bundler/parcel/blob/636bb50baeae15730c3b91cd3b58b457c31f7200/packages/core/parcel-bundler/src/scope-hoisting/concat.js#L344

Prepending _ (return "_" + ret) to every newName also works: https://github.com/parcel-bundler/parcel/blob/636bb50baeae15730c3b91cd3b58b457c31f7200/packages/core/parcel-bundler/src/scope-hoisting/mangler.js#L52 I'm guessing we rename a variable even though the name is already used.

mischnic commented 1 year ago

Should be fixed in Parcel 2