React app not working with tree shaking enabled

[mturki]

🐛 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)

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

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]

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]

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

parcel/packages/core/parcel-bundler/src/scope-hoisting/concat.js

Line 344 in 636bb50

mangleScope(path.scope);

Prepending _ (return "_" + ret) to every newName also works:

parcel/packages/core/parcel-bundler/src/scope-hoisting/mangler.js

Line 52 in 636bb50

return ret;

I'm guessing we rename a variable even though the name is already used.

[mischnic]

Should be fixed in Parcel 2