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

.babelrc :

{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/typescript"],
"plugins": [
[
  "@babel/plugin-proposal-decorators",
  {
    "legacy": true
  }
],
[
  "@babel/plugin-proposal-class-properties",
  {
    "loose": true
  }
]
]
}

package.json : package.json

{
"name": "webapp",
"main": "index.tsx",
"sideEffects": false,
"dependencies": {
"react": "16.8.5",
"react-dom": "16.8.5"
},
"devDependencies": {
"@babel/core": "7.4.0",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-proposal-decorators": "7.4.0",
"@babel/preset-env": "7.4.2",
"@babel/preset-react": "7.0.0",
"@babel/preset-typescript": "7.3.3",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"concurrently": "4.1.0",
"parcel-bundler": "1.12.3",
"typescript": "3.3.4000"
},
"scripts": {
"develop": "concurrently -r \"yarn type-check:watch\" \"yarn start\"",
"prebuild": "rm -rf ./build/*",
"build": "parcel build ./index.html --out-dir  ./build --no-source-maps",
"build:shake": "yarn build --experimental-scope-hoisting",
"type-check": "tsc --noEmit",
"type-check:watch": "tsc --noEmit --watch"
}
}

tsconfig.json :

{
"name": "webapp",
"main": "index.tsx",
"sideEffects": false,
"dependencies": {
"react": "16.8.5",
"react-dom": "16.8.5"
},
"devDependencies": {
"@babel/core": "7.4.0",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-proposal-decorators": "7.4.0",
"@babel/preset-env": "7.4.2",
"@babel/preset-react": "7.0.0",
"@babel/preset-typescript": "7.3.3",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"concurrently": "4.1.0",
"parcel-bundler": "1.12.3",
"typescript": "3.3.4000"
},
"scripts": {
"develop": "concurrently -r \"yarn type-check:watch\" \"yarn start\"",
"prebuild": "rm -rf ./build/*",
"build": "parcel build ./index.html --out-dir  ./build --no-source-maps",
"build:shake": "yarn build --experimental-scope-hoisting",
"type-check": "tsc --noEmit",
"type-check:watch": "tsc --noEmit --watch"
}
}

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

Possible Bug? Or incorrect build configuration?
Removing the sideEffects": false,don't fix the problem, but at least, index.jsx console.log("Coucou depuis tsx!") logs is properly displayed on the console.
In the provided minimum exemple, If i open the build tree shaked js file, i don't find any reference to the <p>Hello world</p> react. Without tree shaking, this ref appears at the end of file.

🔦 Context

Trying to minify my app to reduce bundle size.

💻 Code Sample

github.com/mturki/test-parcel-typescript-treeshaking

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)

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:

This is not related to Typescript.
It's just the mangling that fails

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

parcel-bundler / parcel

React app not working with tree shaking enabled #2859