Version 5.1.0 breaks react-vega

[mattdeitke]

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:

1. To reproduce, create a minimal react app:

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

2. Install the react-vega dependencies:

yarn add vega vega-lite react-vega

3. 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;

4. Start the app:

yarn start

Version 5.0.x Works

5. 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 vega-lite@5.0.x

yarn start

[domoritz]

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

[mattdeitke]

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

[domoritz]

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]

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]

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]

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]

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

[jasonsturges]

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]

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]

@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 react-scripts@2.0.0, 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 react-scripts@2.0.0 and higher.

[domoritz]

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]

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 vega-lite@5.1.0 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]

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]

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]

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