utils.js crashes IE11 with 'Expected identifier, string or number'

[robtree]

Info

Tool	Version
Package	@gtm-support/vue2-gtm v1.0.0
Node	v14.1.0
OS	win

When running a production (Vue) build which uses https://www.npmjs.com/package/@gtm-support/vue2-gtm, the bundle fails to load in IE11 (screenshot below) due to a problem in utils.js from gtm-support/core.

[Shinigami92]

I don't have an environment to test against an IE11
Can you find more out about this problem? Also the code looks very "modern", with const and ... spread operator and so on. Are these the sourcemaps or the finished source that gets executed in IE11, if second, then you may need to transpile it further down 🤔

[robtree]

The problematic part of the transpiled/finished source code looks like this:

const u = new URLSearchParams({ id: t, ...(null !== (i = e.queryParams) && void 0 !== i ? i : {}) });

Reverting to https://github.com/mib200/vue-gtm solves the problem, the same code in the loadScript function in https://github.com/mib200/vue-gtm/blob/master/src/utils.ts looks simpler.

[Shinigami92]

But

core/src/utils.ts

Lines 56 to 59 in 66b68c3

	const queryString: URLSearchParams = new URLSearchParams({
	id,
	...(config.queryParams ?? {})
	});

and https://github.com/mib200/vue-gtm/blob/vue-2/src/utils.ts#L36-L39 are the same code

So it must be something with down transpiling 🤔

---

Yes...

https://github.com/mib200/vue-gtm/blob/73d39cf1e77dfb3ed0db02dc2ca04e1aedf5965d/tsconfig.json#L3
vs

core/tsconfig.json

Line 3 in 66b68c3

"target": "ES2018",

I think you have a bundler on your side, like webpack or so.
Is it possible to tell your bundler to transpile it further down?

Otherwise I need to look into how to ship multiple targets, so folks without IE11 have smaller bundler size and folks with IE11 needs to get served the old es5 code

[robtree]

Yes, I'm using Vue CLI and my package.json targets IE11:

"browserslist": [ "> 1%", "last 2 versions", "not dead" ]

Now I can set up vue.config.js like this as well:

module.exports = { transpileDependencies: [ '@gtm-support/core' ] };

[Shinigami92]

Nice, so if this works, I can update README.md.
So everyone with the need to support IE11 or similar can use this workaround 🙂

[robtree]

Sure, for those using Vue CLI it seems good. Thanks for helping with this issue :)

https://cli.vuejs.org/config/#transpiledependencies

[Shinigami92]

Note was added to the readme

55a44e9
gtm-support/vue-gtm@a7d935f