Version 5.1.0 breaks react-vega

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

1. Install the react-vega dependencies:

yarn add vega vega-lite react-vega

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

1. Start the app:

yarn start

Version 5.0.x Works

1. 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

[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 https://github.com/vega/react-vega/issues/367#issuecomment-830677182 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]

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