How do I configure a Nextjs project to transpile a monorepo project with next bundle analyzer?

Question

I want to configure next js bundle analyzer with transpiling monorepo.
I have a error message for loader. so I did this Stack overflow But It still has error.
How do I configure a Nextjs project to transpile a monorepo project with next bundle analyzer?

This is my error message.

[0] error - ../../node_modules/antd/lib/message/style/index.less
[0] Module parse failed: Unexpected character '@' (1:0)
[0] 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
[0] > @import '../../style/themes/index';
[0] | @import '../../style/mixins/index';
[0] |

This is my next.config.js.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const withAntdLess = require('next-plugin-antd-less')
const themeColor = require('../../themeColor')
const withPlugins = require('next-compose-plugins')
const PACKAGE_NAMES = ['@package/ui', '@package/types'] // Add new packages to this array when imported into this app
const withTM = require('next-transpile-modules')(PACKAGE_NAMES)
const nextConfig = {
  lessVarsFilePath: './src/styles/variables.less',
  reactStrictMode: false,
  pageExtensions: ['page.tsx', 'page.ts'],
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false
      config.resolve.fallback.module = false
    }

    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}
module.exports = withPlugins([
  [withBundleAnalyzer],
  [
    withTM(
      withAntdLess({
        modifyVars: {
          '@primary-color': themeColor.primary,
          '@font-size-base': '15px',
          '@font-family': "'Spoqa Han Sans Neo', 'sans-serif'",
          '@font-size-lg': '15px',
          '@font-size-sm': '13px',
          '@divider-color': themeColor.bgOptional,
          '@link-decoration': 'unset',
          '@link-hover-decoration': 'unset',
          '@link-focus-decoration': 'unset',
          '@link-color': 'unset',
          '@link-hover-color': 'unset',
          '@link-active-color': 'unset',
        },
      }),
    ),
  ],
  nextConfig,
])

Answer 1

First make sure you've installed the correct bundle analyzer. Then edit your next.config.js and try to organise your code the recommended way:

const withTM = require('next-transpile-modules')([
  'ui',
  'assets',
  ...
]);

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer(withTM({
  reactStrictMode: true,
  ...other options
}));

When building your app just do ANALYZE=true npm run build.