Remove react-query-devtools from production build

.github/actions/bundle_size_test/action.yml

@@ -0,0 +1,8 @@
+name: bundlesize
+runs:
+  using: composite
+  steps:
+  - name: Check bundle size
+    run: |-
+        npm run test:max-file-size
+    shell: bash

.github/actions/unit_tests/action.yml

@@ -19,9 +19,6 @@ runs:
       # Note: Each of these test commands need to be exposed on the monorepo
       # root and *also* on the PWA package. This section is run on both.
 
-      # Ensure bundlesize is in check
-      npm run test:max-file-size
-
       # Always run fast unit tests
       npm run test
     shell: bash

.github/workflows/test.yml

@@ -63,6 +63,9 @@ jobs:
       - name: Run unit tests
         uses: "./.github/actions/unit_tests"
 
+      - name: Run bundlesize test
+        uses: "./.github/actions/bundle_size_test"
+
       - name: Smoke test scripts
         if: env.IS_DEFAULT_NPM == 'true'
         uses: "./.github/actions/smoke_tests"

packages/commerce-sdk-react/package.json

@@ -46,7 +46,6 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-query-devtools": "^4.28.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",

packages/commerce-sdk-react/src/provider.tsx

@@ -20,7 +20,6 @@ import {
 } from 'commerce-sdk-isomorphic'
 import Auth from './auth'
 import {ApiClientConfigParams, ApiClients} from './hooks/types'
-import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 
 export interface CommerceApiProviderProps extends ApiClientConfigParams {
     children: React.ReactNode
@@ -153,7 +152,6 @@ const CommerceApiProvider = (props: CommerceApiProviderProps): ReactElement => {
             <CommerceApiContext.Provider value={apiClients}>
                 <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
             </CommerceApiContext.Provider>
-            <ReactQueryDevtools />
         </ConfigContext.Provider>
     )
 }

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -213,9 +213,12 @@ const withChunking = (config) => {
             splitChunks: {
                 cacheGroups: {
                     vendor: {
-                        // Anything imported from node_modules lands in
-                        // vendor.js, if we're chunking.
-                        test: /node_modules/,
+                        // Two scenarios that we'd like to chunk vendor.js:
+                        // 1. The package is in node_modules
+                        // 2. The package is one of the monorepo packages.
+                        //    This is for local development to ensure the bundle
+                        //    composition is the same as a production build
+                        test: /(node_modules)|(packages\/.*\/dist)/,
                         name: 'vendor',
                         chunks: 'all'
                     }

packages/template-retail-react-app/app/components/_app-config/index.jsx

@@ -23,6 +23,7 @@ import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/wit
 import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import {useCorrelationId} from 'pwa-kit-react-sdk/ssr/universal/hooks'
 import {getAppOrigin} from 'pwa-kit-react-sdk/utils/url'
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
@@ -57,6 +58,7 @@ const AppConfig = ({children, locals = {}}) => {
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
                 <ChakraProvider theme={theme}>{children}</ChakraProvider>
             </MultiSiteProvider>
+            <ReactQueryDevtools />
         </CommerceApiProvider>
     )
 }