Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scope hoisting breaks with d3-transition #7274

Closed
naitian opened this issue Nov 10, 2021 · 1 comment
Closed

Scope hoisting breaks with d3-transition #7274

naitian opened this issue Nov 10, 2021 · 1 comment

Comments

@naitian
Copy link

naitian commented Nov 10, 2021 •
edited

🐛 bug report

When building a project that uses d3-transition (which overrides the selection prototype in d3-selection), the scope hoisting that is enabled by default builds a broken package (d3-transition fails to override the selection prototype to add a transition function). This looks like #3780, except it's still broken in stable Parcel 2.

ETA: it works when scope hoisting is disabled (i.e. I build with --no-scope-hoist flag), so that's why I'm pretty confident scope hoisting is the culprit here.

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

package.json

{
  "name": "parcel-is-broken",
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "parcel": "^2.0.1"
  },
  "dependencies": {
    "d3": "^7.1.1"
  }
}

🤔 Expected Behavior

The bundled output runs correctly (scope hoisting bails, probably).

😯 Current Behavior

The bundled output throws

Uncaught TypeError: wt(...).transition is not a function

because the selection prototype is not receiving a transition() function from d3-transition.

💁 Possible Solution

This might be due to some combination of how the scope hoisting is renaming functions and how the d3 library is patching the prototypes... I think probably the scope hoisting should just bail, but it doesn't for some reason.

🔦 Context

💻 Code Sample

Here's a minimum working example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Parcel is Broken</title>
        <script type="module" src="./index.js" charset="utf-8"></script>
    </head>
    <body>
        <div>
            Hello
        </div>
    </body>
</html>
// index.js
import * as d3 from "d3";

window.onload = () => {
  d3.select("div")
    .transition()
    .duration(2000)
    .style("background-color", "red")
    .style("color", "yellow");
};

🌍 Your Environment

Software Version(s)
Parcel 2.0.1
Node 16.6.2
npm/Yarn 1.22.11
Operating System MacOS 11.2
@mischnic
Copy link
Member

Duplicate of #7239

See #7239 (comment), Parcel currently interprets these globs incorrectly:
https://github.com/d3/d3-transition/blob/c1f17d9c64e447e4e6a20d9e138506d1207eee35/package.json#L37

JonasDoesThings added a commit to nxt3AT/sankeydiagram.net that referenced this issue Apr 9, 2022
@JonasDoesThings
build: remove now unnecessary --no-scope-hoist flag for build and rem…
1991fff 
…ove known issue from docs

see parcel issue parcel-bundler/parcel#7274 and pullrequest parcel-bundler/parcel#7288
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@naitian @mischnic