Configure multiple next plugins: withMDX, withBundleAnalyzer - reactjs

Question

I started a nextjs site with a tailwind blog starter that already comes with withBundleAnalyzer in next.config.js.
I am now trying to get .mdx files to work from the pages directly. Documentation says I need withMDX in my nextjs.config file. How do I get the two to play together? Should I only keep one or the other? I have installed next-compose-plugins but not sure how to set it all up.
Update
This is my next config file; it's still failing. Error:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
TypeError: undefined is not a function
at _withPlugins (/home/xxx/xxx/nodeapps/my-web/node_modules/next-compose-plugins/lib/index.js:17:22)
at Object.<anonymous> (/home/xxx/xxx/nodeapps/my-web/next.config.js:11:18)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/next-server/server/config.js:8:94)
at async NextServer.loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/server/next.js:1:2962)
const withPlugins = require('next-compose-plugins')
const withMDX = require('#next/mdx')({
extension: /\.mdx$/,
})
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withPlugins(
withMDX(
withBundleAnalyzer({
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
future: {
webpack5: true,
},
webpack: (config, { dev, isServer }) => {
config.module.rules.push({
test: /\.(png|jpe?g|gif|mp4)$/i,
use: [
{
loader: 'file-loader',
options: {
publicPath: '/_next',
name: 'static/media/[name].[hash].[ext]',
},
},
],
})
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
})
if (!dev && !isServer) {
// Replace React with Preact only in client production build
Object.assign(config.resolve.alias, {
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
})
}
return config
},
})
)
)

Answer 1

As you mentioned you can use next-compose-plugins like this
const withPlugins = require('next-compose-plugins');
const withMDX = require('#next/mdx');
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withPlugins([
// add a plugin with specific configuration
[withMDX, {
// MDX plugin specific options
}],
// add it like this if no plugin configuration is needed
[withBundleAnalyzer],
]);
EDIT:
Here is your complete config file:
const withPlugins = require("next-compose-plugins");
const withMDX = require("#next/mdx")({
extension: /\.mdx?$/,
});
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withPlugins([[withBundleAnalyzer], [withMDX]], {
pageExtensions: ["js", "jsx", "md", "mdx"],
future: {
webpack5: true,
},
webpack: (config, { dev, isServer }) => {
config.module.rules.push({
test: /\.(png|jpe?g|gif|mp4)$/i,
use: [
{
loader: "file-loader",
options: {
publicPath: "/_next",
name: "static/media/[name].[hash].[ext]",
},
},
],
});
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"],
});
if (!dev && !isServer) {
// Replace React with Preact only in client production build
Object.assign(config.resolve.alias, {
react: "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
});
}
return config;
},
});

Answer 2

You can setup the config without using next-compose-plugins as well.
const withMDX = require('#next/mdx')({
extension: /\.mdx$/,
})
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withMDX(withBundleAnalyzer({
// Your Next.js configs, including withMDX-specific options
}))