query: Migrating to V4 - React Query Devtools module parse failed

Describe the bug

I have migrated to React Query V4. When I include @tanstack/react-query-devtools it displays error like below:

unitless.browser.esm.js:50 Uncaught Error: Module parse failed: Unexpected token (18:1274)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|    * @author Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)
|    */
> const o={CASE_SENSITIVE_EQUAL:7,EQUAL:6,STARTS_WITH:5,WORD_STARTS_WITH:4,CONTAINS:3,ACRONYM:2,MATCHES:1,NO_MATCH:0};function s(e,n,t){return e=a(e,t),(n=a(n,t)).length>e.length?o.NO_MATCH:e===n?o.CASE_SENSITIVE_EQUAL:(e=e.toLowerCase())===(n=n.toLowerCase())?o.EQUAL:e.startsWith(n)?o.STARTS_WITH:e.includes(` ${n}`)?o.WORD_STARTS_WITH:e.includes(n)?o.CONTAINS:1===n.length?o.NO_MATCH:function(e){let n="";return e.split(" ").forEach((e=>{e.split("-").forEach((e=>{n+=e.substr(0,1)}))})),n}(e).includes(n)?o.ACRONYM:function(e,n){let t=0,r=0;function s(e,n,r){for(let o=r,s=n.length;o<s;o++){if(n[o]===e)return t+=1,o+1}return-1}function a(e){const r=1/e,s=t/n.length;return o.MATCHES+s*r}const i=s(n[0],e,0);if(i<0)return o.NO_MATCH;r=i;for(let t=1,a=n.length;t<a;t++){r=s(n[t],e,r);if(!(r>-1))return o.NO_MATCH}return a(r-i)}(e,n)}function a(e,t){let{keepDiacritics:o}=t;return e=`${e}`,o||(e=e.replace(r,(e=>n[e]))),e}function i(e,n){let t=n;"object"==typeof n&&(t=n.accessor);const r=t(e);return null==r?[]:Array.isArray(r)?r:[String(r)]}const u={maxRanking:1/0,minRanking:-1/0};function c(e){return"function"==typeof e?u:{...u,...e}}e.compareItems=function(e,n){return e.rank===n.rank?0:e.rank>n.rank?-1:1},e.rankItem=function(e,n,t){if((t=t||{}).threshold=t.threshold??o.MATCHES,!t.accessors){const r=s(e,n,t);return{rankedValue:e,rank:r,accessorIndex:-1,accessorThreshold:t.threshold,passed:r>=t.threshold}}const r=function(e,n){const t=[];for(let r=0,o=n.length;r<o;r++){const o=n[r],s=c(o),a=i(e,o);for(let e=0,n=a.length;e<n;e++)t.push({itemValue:a[e],attributes:s})}return t}(e,t.accessors),a={rankedValue:e,rank:o.NO_MATCH,accessorIndex:-1,accessorThreshold:t.threshold,passed:!1};for(let e=0;e<r.length;e++){const i=r[e];let u=s(i.itemValue,n,t);const{minRanking:c,maxRanking:l,threshold:A=t.threshold}=i.attributes;u<c&&u>=o.MATCHES?u=c:u>l&&(u=l),u=Math.min(u,l),u>=A&&u>a.rank&&(a.rank=u,a.passed=!0,a.accessorIndex=e,a.accessorThreshold=A,a.rankedValue=i.itemValue)}return a},e.rankings=o,Object.defineProperty(e,"__esModule",{value:!0})}));
| //# sourceMappingURL=index.production.js.map
| 
    at ./node_modules/@tanstack/match-sorter-utils/build/umd/index.production.js (unitless.browser.esm.js:50:29)
    at __webpack_require__ (bootstrap:63:1)
    at ./node_modules/@tanstack/react-query-devtools/build/lib/devtools.js (devtools.js:8:24)
    at __webpack_require__ (bootstrap:63:1)
    at ./node_modules/@tanstack/react-query-devtools/build/lib/index.js (index.js:5:16)
    at __webpack_require__ (bootstrap:63:1)
    at ./formEfficiencyReport/src/App.tsx (App.tsx:1:1)
    at __webpack_require__ (bootstrap:63:1)
    at ./formEfficiencyReport/src/index.tsx (index.tsx:1:1)
    at __webpack_require__ (bootstrap:63:1)

Your minimal, reproducible example

https://codesandbox.io/s/dry-lake-cyly62?file=/src/App.js

Steps to reproduce

In package.json:

"@tanstack/react-query": "4.3.3",
    "@tanstack/react-query-devtools": "4.3.3",

In webpack.config.js:

const babelConfig = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: [
            '> 1%',
            'last 2 chrome versions',
            'last 2 firefox versions',
            'last 2 safari versions',
            'last 2 opera versions',
            'not ie 11',
            'not op_mini all',
          ],
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-transform-runtime',
    'styled-components',
    '@babel/plugin-proposal-class-properties',
  ],
};

rules: [
      {
        test: /\.(ts|tsx|style.ts|style.tsx|js|jsx)$/,
        resolve: {
          extensions: ['.ts', '.tsx', '.style.ts', '.style.tsx', '.js', '.jsx'],
        },
        exclude: [/node_modules/, /tsconfig.json/],
        use: {
          loader: 'babel-loader',
          options: { ...babelConfig },
        },
      },
      {
        test: /\.(mjs)$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }]

Expected behavior

I expect to display React Query Devtools, but it displays error. When I’m not including devtools it works fine.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Mac OS 12.3.1
• Node 14.17.0
• NPM 6.14.13

react-query version

4.3.3

TypeScript version

No response

Additional context

No response