Module not found: Can't resolve 'fs' when using @next/bundle-analyzer

[mg-aceik]

Describe the Bug

When the @next/bundle-analyzer is installed and configured, building the site gives:

  ../../node_modules/webpack-bundle-analyzer/lib/analyzer.js
  Module not found: Can't resolve 'fs'
  
  https://nextjs.org/docs/messages/module-not-found
  
  Import trace for requested module:
  ../../node_modules/webpack-bundle-analyzer/lib/viewer.js
  ../../node_modules/webpack-bundle-analyzer/lib/index.js
  ../../node_modules/@next/bundle-analyzer/index.js
  ./next.config.js
  ./src/core/FEAASScripts/FEAASScripts.tsx
  ./src/Scripts.tsx
  ./src/Layout.tsx
  ./src/pages/500.tsx

To Reproduce

1. npx create-sitecore-jss nextjs,nextjs-sxa,nextjs-multisite,nextjs-xmcloud
2. Follow https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer and enable the analyzer
3. npm run build

Expected Behavior

Site should build successfully.

Possible Fix

The issue is due to https://github.com/Sitecore/jss/blob/8c23ac3af2341d0115268349581891fd9d049ebd/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/FEAASScripts.tsx#L3 - import nextConfig from 'next.config';

If this import and its usages are commented out, then the error goes away, however of course this will possibly break the FEAAS functionality.

Provide environment information

• Sitecore Version: XM Cloud
• JSS Version: 22.0.0
• Browser Name and version: Chrome latest
• Operating System and version (desktop or mobile): Windows 11
• Link to your project (if available): n/a