Scope hoisting: wrapped non-toplevel var declarations

🐛 bug report

Creating a Parcel build for a React app in development and production, expecting the React application to load properly when it is served statically.

When running the parcel build with experimental scope hoisting and serving, it is runtime erroring out on different conditions.

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

.babelrc

{
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "regenerator": true
        }],
        "transform-es2015-arrow-functions",
        "@babel/proposal-class-properties"
    ],
    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

.tsconfig

{
    "compilerOptions": 
    {
        "target": "es5",
        "sourceMap": true,
        "module": "esnext",
        "jsx": "react",
        "lib": [ "es2015", "es2016", "es2017", "esnext", "dom" ],
        "outDir": "./dist/",
        "noImplicitAny": true,
        "allowJs": true,
        "pretty": false,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node"
    },
    "include": [
        "./src/**/*",
        "./typings/**/*"
    ]
}

🤔 Expected Behavior

A parcel build, being served statically with the React app loading properly.

😯 Current Behavior

--------------- Upon building and serving the build with minification ---------------

parcel build ./src/client/index.html --no-cache --out-dir ./dist/client  --experimental-scope-hoisting

Loading the app the following error is thrown, caused by lodash requiring the ‘buffer’ module.

Uncaught Error: Cannot find module 'buffer'
    at u (main.2d3e7cc1.js:1)
    at Object.<anonymous> (main.2d3e7cc1.js:1)
    at main.2d3e7cc1.js:1
    at main.2d3e7cc1.js:1
    at main.2d3e7cc1.js:1

--------------- Building the app without minification. ---------------

parcel build ./src/client/index.html --no-minify --no-cache --out-dir ./dist/client  --experimental-scope-hoisting

Loading the app the following error is thrown.

main.c98ce985.js:40091 Uncaught ReferenceError: $Rd93$var$warning is not defined
    at validateTypeDef (main.c98ce985.js:40091)
    at Object.propTypes (main.c98ce985.js:40074)
    at mixSpecIntoComponent (main.c98ce985.js:40155)
    at createClass (main.c98ce985.js:40447)
    at $I4qe$init (main.c98ce985.js:40657)
    at $YBnz$init (main.c98ce985.js:40971)
    at $oN7R$init (main.c98ce985.js:41276)
    at $jUtL$init (main.c98ce985.js:41638)
    at main.c98ce985.js:41741
    at main.c98ce985.js:42

Also causes another library (redux) to throw

You are currently using minified code outside of NODE_ENV === 'production'.

💁 Possible Solution

🔦 Context

Would like to achieve the same bundle sizes as we did with a webpack build through the use of tree shaking, but it causes the app to not load.

We run a React app, which uses a mix of JS and Typescript.

💻 Code Sample

Kind of hard to provide a sample, it happens in a production running application. Can attempt to create a replication repo.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	8.11.4
npm/Yarn	1.9.4
Operating System	macOS Catalina

[1saf]

I have isolated the problem to a library, with all this code commented out in our actual app, the error

main.c98ce985.js:40091 Uncaught ReferenceError: $Rd93$var$warning is not defined

still occurs but I have narrowed it down considerably.

The above error does not appear in a non-minified build with a library ‘react-notification-system-redux’ being used. But when ran in a non minified build, the error does appear. Very odd. It might be due to conflicting versions of React within the application.

I will report back here once I figure out more, and if so, create a replicable repo.

Thanks for being patient.

[mischnic]

Mh, please create a reproduction repo.