React Query Devtools import error on Chrome 88/CEF using Parcel as bundler

[repli-a]

Describe the bug

When running my app via Chromium Embedded Framework (using Chromium 88) and trying to import React Query Devtools, I get the following error:

Uncaught SyntaxError: Invalid or unexpected token @ index.2eb963e7.js:156937

Which corresponds to:

{"@parcel/transformer-js/src/esmodule-helpers.js":"flGkb"}],"5cRJZ":[function(require,module,exports) {
/**
 * match-sorter-utils
 *
 * Copyright (c) TanStack
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "compareItems", ()=>compareItems);
parcelHelpers.export(exports, "rankItem", ()=>rankItem);
parcelHelpers.export(exports, "rankings", ()=>rankings);
const characterMap = {
    À: "A",
    �: "A",
    Â: "A",
    Ã: "A",
    Ä: "A",

At first I thought this might be a bundler error (I'm using Parcel, although I've read some of the other issues along these lines like 4396 about Webpack). However when loading the page from any other location the error is not present (for example codesandbox or the local dev server that runs on a more modern Chrome version). I downloaded older versions of Chrome (as far back as 86) to confirm that this was not a Chrome issue. When I do the characters show up correctly and no error is present, even though everything is still bundled by the bundler.

    À: "A",
    Á: "A",
    Â: "A",
    Ã: "A",
    Ä: "A",

This is probably ultimately a CEP/CEF issue with character encoding from the looks of it but wanted to post here in case some additional insight could be gained from the maintainers of the module that I'm trying to import, or if there's perhaps a workaround. It would be great to be able to have the visibility into what's going on with react query that the devtools would provide.

Your minimal, reproducible example

https://codesandbox.io/s/practical-ritchie-vw59rh?file=/public/index.137c63d3.js:1497153-1502024

Steps to reproduce

Create Adobe CEP app using CEP 11.1 and import React Query Devtools, launch through creative app, then view the Chrome Debugger at localhost:8000.

Expected behavior

Importing and using devtools should work correctly on CEF

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

OS: Windows
Browser: Chromium (Chromium Embedded Framework)
Version: 88
Bundler: Parcel 2.8.3

Tanstack Query adapter

react-query

TanStack Query version

4.35.7

TypeScript version

No response

Additional context

Would a standalone version of React Query Devtools that could be configured to listen at a certain port with a script tag, similar to how React handles "unusual environments", be possible for instances like these?

[TkDodo]

does it work with the latest version of chrome? also, please try version 5, where we have brand new devtools.

[repli-a]

It does work on the latest Chrome, and any Chrome environment I’ve tried that isn’t this embedded Chromium setup. Again this is probably an issue on their end but wanted to see if the error rang any bells. I’ve opened an issue with them as well.

I’d like to try v5 but for the purposes of this project I’m stuck with Chrome 88 and the minimum supported Chrome for v5 is 91 per the documentation. Would it still work 3 versions behind, and if not what would I need to polyfill?

[TkDodo]

you would need to transpile the code from node_modules for the environment yourself.

However, the devtools are always only meant to work on latest environments, because they are used in dev-mode only, on developer machines. There's no need to have them be backwards compatible with older browsers, as we can expect dev machines to be up-to-date.

So, I'm sorry, but I won't be investing time to look in into this.