Version 5.1.0 breaks react-vega #7437

mattdeitke · 2021-05-05T20:37:06Z

Summary

Hi,

I've tried upgrading several repos to use version 5.1.0, but it appears to break react-vega. Downgrading to version 5.0.x worked just as expected on all repos.

Webpack Error Message when using Create React App

./node_modules/vega-lite/build/src/channeldef.js 109:33
Module parse failed: Unexpected token (109:33)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     if (scaleType) {
|       if (hasDiscreteDomain(scaleType)) {
>         return config[mark.type]?.discreteBandSize || {
|           band: 1
|         };

[Long] Webpack error message when using Gatsby.js

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (104:28)

File: node_modules\vega-lite\build\src\util.js:104:28


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (12:25)

File: node_modules\vega-lite\build\src\compile\concat.js:12:25


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (138:24)

File: node_modules\vega-lite\build\src\compile\data\stack.js:138:24


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (13:35)

File: node_modules\vega-lite\build\src\compile\data\bin.js:13:35


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (145:18)

File: node_modules\vega-lite\build\src\scale.js:145:18


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (15:40)

File: node_modules\vega-lite\build\src\compile\data\sequence.js:15:40


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (18:32)

File: node_modules\vega-lite\build\src\config.js:18:32


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (19:9)

File: node_modules\vega-lite\build\src\log\index.js:19:9


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (21:17)

File: node_modules\vega-lite\build\src\compile\axis\assemble.js:21:17


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (22:33)

File: node_modules\vega-lite\build\src\compile\data\window.js:22:33


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (25:58)

File: node_modules\vega-lite\build\src\compile\selection\assemble.js:25:58


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (25:71)

File: node_modules\vega-lite\build\src\compile\facet.js:25:71


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (29:42)

File: node_modules\vega-lite\build\src\compile\selection\parse.js:29:42


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (33:63)

File: node_modules\vega-lite\build\src\normalize\index.js:33:63


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (34:41)

File: node_modules\vega-lite\build\src\compile\data\joinaggregate.js:34:41


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (35:84)

File: node_modules\vega-lite\build\src\compile\data\aggregate.js:35:84


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (45:42)

File: node_modules\vega-lite\build\src\compile\data\parse.js:45:42


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (47:53)

File: node_modules\vega-lite\build\src\compile\layoutsize\parse.js:47:53


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (54:43)

File: node_modules\vega-lite\build\src\compile\data\assemble.js:54:43


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (57:17)

File: node_modules\vega-lite\build\src\compile\model.js:57:17


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (57:30)

File: node_modules\vega-lite\build\src\compile\data\facet.js:57:30


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (57:48)

File: node_modules\vega-lite\build\src\compile\axis\parse.js:57:48


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (61:43)

File: node_modules\vega-lite\build\src\compile\selection\index.js:61:43


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (63:44)

File: node_modules\vega-lite\build\src\compile\common.js:63:44


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (65:39)

File: node_modules\vega-lite\build\src\compile\unit.js:65:39


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (71:41)

File: node_modules\vega-lite\build\src\channeldef.js:71:41


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:14)

File: node_modules\vega-lite\build\src\compile\data\source.js:7:14


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:19)

File: node_modules\vega-lite\build\src\compile\legend\assemble.js:7:19


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (7:21)

File: node_modules\vega-lite\build\src\predicate.js:7:21


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (89:37)

File: node_modules\vega-lite\build\src\compile\data\formatparse.js:89:37

failed Building development bundle - 12.164s

Minimal Reproduction

Steps 1-3 are done in this repo. If it's easier, simply run:

git clone https://github.com/mattdeitke/vega-lite-react-bug-v5.1.0.git

Otherwise:

To reproduce, create a minimal react app:

npx create-react-app my-app
cd my-app

Install the react-vega dependencies:

yarn add vega vega-lite react-vega

Change the App.js to the following minimal example that uses vega-lite:

import { VegaLite } from "react-vega";

const spec = {
  width: 400,
  height: 200,
  mark: "bar",
  encoding: {
    x: { field: "a", type: "ordinal" },
    y: { field: "b", type: "quantitative" },
  },
  data: { name: "table" }, // note: vega-lite data attribute is a plain object instead of an array
};

const barData = {
  table: [
    { a: "A", b: 28 },
    { a: "B", b: 55 },
    { a: "C", b: 43 },
    { a: "D", b: 91 },
    { a: "E", b: 81 },
    { a: "F", b: 53 },
    { a: "G", b: 19 },
    { a: "H", b: 87 },
    { a: "I", b: 52 },
  ],
};

function App() {
  return <VegaLite spec={spec} data={barData} />;
}

export default App;

Start the app:

yarn start

Version 5.0.x Works

To test that the old version (5.0.x) is working property, after doing all of the above, simply run the following:

yarn remove vega-lite
yarn add [email protected]

yarn start

The text was updated successfully, but these errors were encountered:

domoritz · 2021-05-05T20:38:26Z

Is this the same as vega/react-vega#367 (comment)?

mattdeitke · 2021-05-05T20:39:21Z

Ah, shoot. I think it is. Sorry, missed it in the other repo.

domoritz · 2021-05-05T20:40:06Z

Thanks for filing the issue so clearly so that I know what to look for.

I see two solutions here. 1) Expect users to use babel 7.8 (https://babeljs.io/blog/2020/01/11/7.8.0) or 2) for now output es2017 instead of es 2020.

If it's the latter, we need to fix that here.

cc @kristw

domoritz · 2021-05-05T20:42:22Z

I feel cra is popular enough that more people run into this so it would make sense to emit es2015/2017.

The issue comes from 275b53d. Note that bundles are unaffected which is why I thought this would be a safe upgrade.

domoritz · 2021-05-05T20:49:29Z

I'm wrong. Babel 7.8 doesn't seem to be enough since @mattdeitke's example uses babel 7.12 already. Maybe one needs to enable some plugin/transform to support optional chaining. @mattdeitke could you see whether you can enable support for optional chaining easily?

Maybe relevant: facebook/create-react-app#8526

mattdeitke · 2021-05-05T21:29:09Z

It looks like optional chaining is already supported by default in v3.3.0 of react-scripts . (I'm using v4.0.3.)

Here, there aren't any issues if I change App to, say,

function App()
  const obj = {
    foo: {
      bar: 42,
    },
  };

  if (obj.foo?.bar === 42) {
    console.log("hello, world");
  }

  return <VegaLite spec={spec} data={barData} />;
}

domoritz · 2021-05-05T21:42:03Z

It could be that node_module deps are not passed through babel. Is that the problem?

jasonsturges · 2021-05-06T20:55:56Z

Using Create React App trying both JavaScript and TypeScript:

JavaScript

JavaScript package.json:

    "react": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-vega": "^7.4.3",
    "vega": "^5.20.2",
    "vega-lite": "^5.0.1",

This gives error:

./node_modules/vega-lite/build/src/channeldef.js 109:33
Module parse failed: Unexpected token (109:33)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     if (scaleType) {
|       if (hasDiscreteDomain(scaleType)) {
>         return config[mark.type]?.discreteBandSize || {
|           band: 1
|         };

Then, tried the solution mentioned at vega/react-vega#367 (comment) by using react-app-rewired with Babel nullish coalescing and optional chaining plugins, but receive the same error as above.

Since React supports optional chaining and nullish coalescing, you'd think this would work out of the box.

JavaScript with Vega-Lite 5.0.0 downgrade

Next, I've tried downgrading Vega Lite to 5.0.x as mentioned here, which initially produced the error referenced below in the TypeScript example. However, was able to get it to work when realizing it was changed tslib.

Lock file diff, changing tslib:

With this, I couldn't get "Approach #1" to work, per https://github.com/vega/react-vega/tree/master/packages/react-vega example. Maybe that's a few feature in 5.1? Using <Vega> or <VegaLite> approaches worked.

TypeScript

Using npx to scaffold a TypeScript CRA also failed.

Project boostrap:

npx create-react-app@latest my-app --use-npm --template typescript

TypeScript package.json

    "react": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-vega": "^7.4.3",
    "typescript": "^4.2.4",
    "vega": "^5.20.2",
    "vega-lite": "^5.0.1",

Gives same error:

./node_modules/vega-lite/build/src/compile/model.js 102:27
Module parse failed: Unexpected token (102:27)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     this.view = replaceExprRef(view); // If name is not provided, always use parent's givenName to avoid name conflicts.
| 
>     this.name = spec.name ?? parentGivenName;
|     this.title = isText(spec.title) ? {
|       text: spec.title

domoritz · 2021-05-06T21:50:23Z

Since React supports optional chaining and nullish coalescing, you'd think this would work out of the box.

As said above, I'm not sure whether cra applies able to dependencies or only code itself. But I agree that it would be the right thing to do.

"vega-lite": "^5.0.1",

Will still resolve to 5.1. You need to set "vega-lite": "~5.0.1",.

jasonsturges · 2021-05-07T05:13:19Z

@domoritz Sorry, I posted the wrong version from package.json during my many tests.

To confirm: 5.1.0 did not work, whereas 5.0.0 was functional - there's a screen capture of the diff above.

Per node modules, I thought Create React App's environment presets included node modules in the frontend build pipeline. Their GitHub Troubleshooting guide states:

Before [email protected], this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in [email protected] and higher.

domoritz · 2021-05-07T05:18:34Z

No problem. I'm still not sure we have a problem here then but it sounds like CRA is not doing what it says it does or am I missing something?

mattdeitke · 2021-05-07T05:43:55Z

Sorry for the late response here.

CRA is not doing what it says it does or am I missing something?

To clarify, the same issue (5.0.0 works, 5.1.0 fails) happens in other React major frameworks Gatsby & Next.js as well, so I think it's independent of CRA. (I hardly use CRA, but it was just the easiest to reproduce the example.)

It could be that node_module deps are not passed through babel. Is that the problem?

This seems like a reasonable solution. I've tried a few claimed solutions to doing this online, although none of them seemed to work. I can try some more things over the next few days, have just gone back to 5.0.x in the meantime. (Also vega/react-vega#367 (comment) did not work.)

Although, since [email protected] fails across all the major React frameworks, perhaps there may be some vega-lite internal setting that is off with the update. At least looking into this problem (briefly), it looks like Babel expects node_modules to more or less set their own config to transpile. (Granted, I don't know a ton about the vega-lite internals, or Babel for that matter, so perhaps I'm way off here.)

domoritz · 2021-05-10T17:50:27Z

At least looking into this problem (briefly), it looks like Babel expects node_modules to more or less set their own config to transpile.

That could be the case but I think that is problematic since it means that libraries would need to compile to the oldest possible JavaScript version.

junior291492659 · 2021-06-15T13:50:35Z

Hello, I have encountered with the same problem and read the discussion above, still feel confused about what the solution is. It would be appreciated to get replied! @jasonsturges

domoritz · 2021-07-12T06:37:04Z

CRA needs to update to Webpack 5. In the meantime, we will switch back to es2015 output.

mattdeitke added the Bug 🐛 label May 5, 2021

domoritz self-assigned this May 5, 2021

mattdeitke closed this as completed May 5, 2021

mattdeitke reopened this May 5, 2021

domoritz added the Need Clarification ❔ Needs clarification before we can proceed. label May 10, 2021

domoritz mentioned this issue Jul 12, 2021

fix: generate es2015 output #7595

Merged

kanitw closed this as completed in #7595 Aug 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Version 5.1.0 breaks react-vega #7437

Version 5.1.0 breaks react-vega #7437

mattdeitke commented May 5, 2021 •

edited

Loading

domoritz commented May 5, 2021

mattdeitke commented May 5, 2021

domoritz commented May 5, 2021

domoritz commented May 5, 2021

domoritz commented May 5, 2021 •

edited

Loading

mattdeitke commented May 5, 2021

domoritz commented May 5, 2021

jasonsturges commented May 6, 2021 •

edited

Loading

domoritz commented May 6, 2021

jasonsturges commented May 7, 2021

domoritz commented May 7, 2021

mattdeitke commented May 7, 2021 •

edited

Loading

domoritz commented May 10, 2021

junior291492659 commented Jun 15, 2021

domoritz commented Jul 12, 2021

Version 5.1.0 breaks react-vega #7437

Version 5.1.0 breaks react-vega #7437

Comments

mattdeitke commented May 5, 2021 • edited Loading

Summary

Minimal Reproduction

Version 5.0.x Works

domoritz commented May 5, 2021

mattdeitke commented May 5, 2021

domoritz commented May 5, 2021

domoritz commented May 5, 2021

domoritz commented May 5, 2021 • edited Loading

mattdeitke commented May 5, 2021

domoritz commented May 5, 2021

jasonsturges commented May 6, 2021 • edited Loading

JavaScript

JavaScript with Vega-Lite 5.0.0 downgrade

TypeScript

domoritz commented May 6, 2021

jasonsturges commented May 7, 2021

domoritz commented May 7, 2021

mattdeitke commented May 7, 2021 • edited Loading

domoritz commented May 10, 2021

junior291492659 commented Jun 15, 2021

domoritz commented Jul 12, 2021

mattdeitke commented May 5, 2021 •

edited

Loading

domoritz commented May 5, 2021 •

edited

Loading

jasonsturges commented May 6, 2021 •

edited

Loading

mattdeitke commented May 7, 2021 •

edited

Loading