Bundle output is ES2020 not ES2015

[alexkreidler]

I've installed vega-lite 5.1.1, but I'm getting the following error from Babel/webpack because of nullish coalescing operators in the vega-lite.js bundle:

/node_modules/vega-lite/build/vega-lite.js:727
      deepMerge_(dest, s ?? {});
                          ^

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.vega-lite (/code/proj/.next/server/pages/_app.js:7845:18)
    at __webpack_require__ (/code/proj/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///./src/models/dataset.ts:10:67)

It seems to be the same issue as #7595 (comment).

I think the problem is because #7595 only changed the tsconfig.json target, which AFAIK is not read by Babel, which is used to build the bundle, so it's exactly the same as before.

A solution would be just to get rid of the @babel/preset-env targets the following in the Rollup config. This would make Babel emit ES5 by default. BTW @babel/preset-env and @babel/env, which is used in the code, are the same; it could be helpful to use the more widely-recognized name.

vega-lite/rollup.config.js

Lines 72 to 74 in 226754f

	{
	targets: 'defaults and not IE 11'
	}

Thanks for this great library!

[domoritz]

We have both bundles for the browser and compiled files for bundlers in our NPM package. The latter is what you should use for web pack and it's ES2015. The bundles are made for browsers that support modern features. Can you change what file your bundler uses?

[alexkreidler]

@domoritz Could you clarify which bundle is for the browser vs for server-side/bundlers?

I'm looking at build/vega-lite.js in v5.1.1 and it has the nullish coalescing operator (??), an ES2020 feature, 195 times in the output (which reproduces what #7595 (comment) saw)

build/vega-lite.min.js also has the same operator/issue.

I can't seem to find another bundle at all. (I do see the transformed code build/src/<module>.js, but it is all separate files and ESM import syntax)

I might be able to change which file the bundler uses although I'm using Next.JS environment so it would require diving a level down into Webpack configs. I think if you use the browser field (also here) of package.json, then it would handle everything automatically to provide two separate bundles.

Thanks for your help!

[domoritz]

Yes, we don't have bundles for bundlers but instead separate files that use imports (

vega-lite/package.json

Line 16 in 11d70ba

"module": "build/src/index",

). Since we don't need a separate browser entry point, we only have a module entry.

[ohltyler]

@domoritz I'm encountering similar errors as @alexkreidler above. What would I need to set in my webpack config and/or babel loader to point to the compiled files (build/src/index) to build an ES5 bundle instead of the default ES6 bundle (build/vega-lite.js)? Apologies if this is a naive question, I'm no expert in webpack & babel so I'm trying to figure this out as I go. Thanks!

[domoritz]

Every webpack and babel setup is different and I don't know webpack well. I won't be able to help without significant time investment.

[ohltyler]

Understood. Am I correct in that I want my webpack configured such that for the vega-lite module, it is using an ES5-compliant target (e.g., web) to bundle? And then configuring the output path of the built file (e.g., node_modules/vega-lite/es5/vega-lite) which we can use in our import statements?

[domoritz]

You need to make sure your tool chain is up to date enough to handle modern js. Then you can leave the sources as is and output whatever version you need.

Also, the web is way beyond es5 at this point so I don't think you even need to output es5.