Parcel: Experimental scope hoisting: Cannot read property 'constantViolations' of undefined

[DragonRaider5]

🐛 bug report

I tried to build my React project with the new experimental scope hoisting enabled (--experimental-scope-hoisting) and it crashed (works without the feature enabled).

🎛 Configuration

cli:
parcel build src/index.html --out-dir dist --public-url ./dist/ --no-cache --experimental-scope-hoisting

.babelrc:

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    [ "transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    } ],
    "styled-components",
    "transform-object-rest-spread",
    "transform-class-properties",
    "transform-async-to-generator",
    "inline-react-svg",
    "react-intl"
  ]
}

🤔 Expected Behavior

Parcel bundles my application.

😯 Current Behavior

Parcel didn't bundle my application.

Stacktrace:

🚨  /Users/user/development/project/src/shared/services/LanguageService.js: Cannot read property 'constantViolations' of undefined
    at rename (/Users/user/development/project/node_modules/parcel-bundler/src/scope-hoisting/renamer.js:9:33)
    at JSAsset.ImportDeclaration (/Users/user/development/project/node_modules/parcel-bundler/src/scope-hoisting/hoist.js:325:7)
    at NodePath._call (/Users/user/development/project/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/user/development/project/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/user/development/project/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/user/development/project/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/user/development/project/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/Users/user/development/project/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/Users/user/development/project/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/Users/user/development/project/node_modules/babel-traverse/lib/path/context.js:115:19)

🔦 Context

My LanguageService contains some dynamic imports and has only one import (browser-locale) - maybe it's related to the dynamic imports or to that package in particular?

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.0 |
| Node | 8.9.1 |
| npm/Yarn | npm 6.1.0 |
| Operating System | macOS High Sierra |

[tuxracer]

Has TypeScript been considered for this project? Potential Cannot read property of undefined runtime errors can typically be caught at build time with ts 🎉

[devongovett]

Thanks for filing this issue! This is why the feature is experimental - we need to try it on a lot of real-world code to be confident about enabling it by default. 😉

Seems like it's trying to rename a binding that doesn't exist somehow. If you can, it would be helpful to post a small example of some code that reproduces the issue.

[DivineGod]

I've run into this issue too and trying to make a minimal test case I came up with the following

import React from "react";
import { render } from "react-dom";

class App extends React.PureComponent {
  render() {
    return "hi";
  }
}

render(<App />, document.getElementById("app"));

The part that causes the issue is having the App component be a class. If it is converted to a function like function App() { return <h1>hi</h1>; } there is no issue

[mike-engel]

For me, this issue starting coming up with built-in methods like JSON.stringify, new Promise(), fetch, etc. Changing those to window.JSON.stringify, new window.Promise(), window.fetch seemed to squash those issues. Some still remain, which seem like issues from outside my source (from modules, etc).

parcel version: 1.9.3

This may not be helpful, but within the renamer file, I added these lines and got this output.

if (!binding || !binding.constantViolations) {
  console.log('binding', binding)
  console.log('oldName', oldName)
  console.log('newName', newName)
}

oldName _extends
newName $727$import$_extends

[dburles]

fwiw i'm also seeing the same error

[fathyb]

Could someone provide a reproduction? Please use a repository, @DivineGod your code works fine for me.

[ofnof]

I also ran into this issue, when trying to convert an existing project that uses rollup to use parcel instead.
I deleted everything from that project to make a minimal repository that reproduces this. See https://github.com/ofnof/parcel-constant-violations. Since I was first using rollup, the babel dependencies were still in my project.
When you remove the .babelrc file and the babel dependencies from that repo, the project will build correctly again (with scope hoisting enabled). My (uneducated) guess is that is either has to do with clashing babel versions, or the use of the transform-runtime.

[nkoehring]

I had the same issue and thanks to @ofnof 's comment, I was able to fix it by removing my babelrc, which only contained:

{ "plugins": ["transform-runtime"] }

But now I'm back to the old problem (Uncaught ReferenceError: regeneratorRuntime is not defined) so I guess I either cannot use tree shaking or async await. :disappointed:

[qndrey]

Hi,
I have set up a small testing repo. https://github.com/andrewBalekha/parcel-tree, which will reproduce a described issue. The issue is with styled-jsx/babel.

I hope it will help.

[rambo-panda]

Could someone provide a reproduction? Please use a repository, @DivineGod your code works fine for me.

i'm also seeing the same error
@fathyb you can try my code code