Support Vega-Lite 5

[domoritz]

[domoritz]

@kristw do you have time to update react vega?

[kristw]

will try to take a look by eow

[domoritz]

Vega-Lite 5.1 is out.

[kristw]

Running into problem with storybook. The exported js from vega-lite somehow use the es2020 syntax ?? and existing webpack/babel does not recognize it.

Module parse failed: Unexpected token (98:42)
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.
| }
| export function getStyles(mark) {
>   return [].concat(mark.type, mark.style ?? []);
| }

[domoritz]

Yes, Vega-Lite generates es2020 (https://github.com/vega/vega-lite/blob/4b5afa4118a021178933c006f585d64d9b9f7ea2/tsconfig.json#L3) for module. The bundles target current browser versions (https://github.com/vega/vega-lite/blob/4b5afa4118a021178933c006f585d64d9b9f7ea2/rollup.config.js#L71). Could you upgrade storybook? I think that's what we did in svelte-vega with success: https://github.com/vega/svelte-vega/blob/main/packages/storybook/package.json#L23.

[kristw]

I did upgrade but still having issue with babel not recognizing the syntax.

[domoritz]

Babel 7.8 supposedly supports it https://babeljs.io/blog/2020/01/11/7.8.0

[ndobb]

For people using the current version of create-react-app nullish coalescing is a problem as well, @kristw and @domoritz.

In order to get react-vega to work without ejecting I had to

1. npm install react-app-rewired customize-cra --save
2. npm install -D @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-syntax-optional-chaining --save
3. In package.json set

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

4. Create a config-overrides.js file:

const { override, addExternalBabelPlugins } = require('customize-cra')

module.exports = override(
  addExternalBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-syntax-optional-chaining'
  ),
)

This allowed Babel to handle the nullish coalescing in node_modules, as otherwise it would only do so under my app's /src directory.

Edit - for reference, my tsconfig.json file is:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "strictNullChecks": false,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ]
}

[domoritz]

Thanks for posting the fix for cra!

[kristw]

@ndobb Thanks for the pointer. Adding the two missing babel plugin resolve storybook.

[kristw]

Now running into runtime issue with vega-xxx.

VegaEmbed.tsx:99 Error: Unrecognized transform type: "stack"
    at error (vega-util.module.js:33)
    at parseTransform (vega-parser.module.js:1586)
    at vega-parser.module.js:2479
    at Array.forEach (<anonymous>)
    at parseData$1 (vega-parser.module.js:2478)
    at vega-parser.module.js:3227
    at Array.forEach (<anonymous>)
    at parseScope (vega-parser.module.js:3227)
    at parseView (vega-parser.module.js:3293)
    at Module.parse$1 (vega-parser.module.js:4027)

VegaEmbed.tsx:99 Error: Second argument to changes must be a changeset.
    at error (vega-util.module.js:33)
    at View.change (vega-view.module.js:91)
    at updateSingleDatasetInView (updateSingleDatasetInView.ts:10)
    at updateMultipleDatasetsInView.ts:6
    at Array.forEach (<anonymous>)
    at updateMultipleDatasetsInView (updateMultipleDatasetsInView.ts:5)
    at Vega.tsx:42
    at VegaEmbed.tsx:109

[domoritz]

The missing transform issue usually happens when Vega is loaded twice.

[thapecroth]

I follow @ndobb suggestion and ran into this error instead

./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
|         };

Any suggestion?

[domoritz]

You need to make sure to have a loader that supports esNext syntax.

[wangjoshuah]

What loader do you use? I'm trying to get Typescript, React, and react-vega all to play nice together and still running into this issue.

[domoritz]

I'll revert to es2015 in the next Vega-Lite release. Please use 5.0, not 5.1 for now.

[kanitw]

Running into problem with storybook. The exported js from vega-lite somehow use the es2020 syntax ?? and existing webpack/babel does not recognize it.

Module parse failed: Unexpected token (98:42)
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.
| }
| export function getStyles(mark) {
>   return [].concat(mark.type, mark.style ?? []);
| }

I got a similar error and managed to get storybook to work by adding the following config to process VG/VL via babel:

webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          "presets": [["@babel/preset-env", { "targets": "defaults" }]]
        }
      },
      include: [
        /node_modules\/vega/,
        /node_modules\/vega-lite/
      ]
    });
    return config
  }

[domoritz]

I fixed the output in https://github.com/vega/vega-lite/pull/7595 btw. We are going back to es2015 for now.