Parcel: Tree shaking react-router-dom

[hannupekka]

🐛 bug report

If I enable --experimental-scope-hoisting on my build, seems that when I import with:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

everything resolves as undefined.

Example repo here: https://github.com/hannupekka/photogallery-example - build with yarn build

🎛 Configuration (.babelrc, package.json, cli command)

https://github.com/hannupekka/photogallery-example/blob/master/.babelrc
https://github.com/hannupekka/photogallery-example/blob/master/package.json

CLI command:

parcel build src/index.html --experimental-scope-hoisting

🤔 Expected Behavior

Application should work

😯 Current Behavior

Everything from react-router-dom is undefined, resulting in https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=undefined&args[]=

💻 Code Sample

https://github.com/hannupekka/photogallery-example - build with yarn build

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 9.0.0
| npm/Yarn | 1.3.2
| Operating System | macOS 10.13.6

[mischnic]

I only get: $WkSz$var$react_pose_1.default.div is not a function

[mischnic]

Quite a strange bug you've discovered:

This

import posed, { PoseGroup } from 'react-pose';

console.log(posed.div);
console.log(PoseGroup);

will log two functions when compiled without tree shaking but posed.div will be undefined if treeshaken. This only happens in Typescript, rename index.ts to index.js and it works fine:
Minimum example: https://github.com/mischnic/photogallery-example

Difference between the bundles:

diff --git a/treeshake-javascript.js b/treeshake-typescript.js
index cd20e0b..e9c5b49 100644
--- a/treeshake-javascript.js
+++ b/treeshake-typescript.js
@@ -1,6 +1,6 @@
 (function() {
        // ASSET: ../node_modules/react-pose/dist/react-pose.es.js
-       // ASSET: ../node_modules/tslib/tslib.es6.js
+       var $mfSv$exports = {};

        /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -6953,6 +6953,39 @@ and limitations under the License.
                return PoseGroup;
        })($n8$exports.Component);

-       console.log($mfSv$export$default.div);
-       console.log($mfSv$export$PoseGroup);
+       $mfSv$exports.default = $mfSv$export$default;
+       $mfSv$exports.PoseGroup = $mfSv$export$PoseGroup;
+       $mfSv$exports.Transition = $mfSv$export$Transition;
+       // ASSET: index.ts
+       var $QCb$exports = {};
+
+       var $QCb$var$__importStar =
+               ($QCb$exports && $QCb$exports.__importStar) ||
+               function(mod) {
+                       if (mod && mod.__esModule) return mod;
+                       var result = {};
+                       if (mod != null)
+                               for (var k in mod) {
+                                       if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+                               }
+                       result["default"] = mod;
+                       return result;
+               };
+
+       Object.defineProperty($QCb$exports, "__esModule", {
+               value: true
+       });
+       var $QCb$var$react_pose_1 = $QCb$var$__importStar($mfSv$exports);
+       console.log($QCb$var$react_pose_1.default.div);
+       console.log($QCb$var$react_pose_1.PoseGroup);
+
+       if (typeof exports === "object" && typeof module !== "undefined") {
+               // CommonJS
+               module.exports = $QCb$exports;
+       } else if (typeof define === "function" && define.amd) {
+               // RequireJS
+               define(function() {
+                       return $QCb$exports;
+               });
+       }
 })();

[mischnic]

@hannupekka Removing the module option in your tsconfig solves the issue

diff --git a/tsconfig.json b/tsconfig.json
index 68257ce..3a75a22 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "commonjs",
     "strict": true,
     "jsx": "react",
     "noImplicitAny": true,

@devongovett @DeMoorJasper How is the typescript target and module option being handled? Doesn't babel always run after Typescript, making these options irrelevant? In this case, Parcel needs the ES6 import syntax for scope hoisting internally.

[DeMoorJasper]

@mischnic pretty sure they don't have any effect as babel always runs afterwards

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.