Configure multiple next plugins: withMDX, withBundleAnalyzer

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
      },
    })
  )
)

tnemele12 · Answer 1 · 2021-04-17T19:29:29.943

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;
    },
});

Hi, thanks for this. Do they both need the `webpack:` option? Right now the `withBundleAnalyzer` block already has webpack section and it mentions all kinds of markdown related things. I guess I'll leave that in place and test. Will report back... — yen, Apr 17 '21 at 17:44
OK. I get: ``` ./pages/test.mdx Module parse failed: Unexpected token (1: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 ``` — yen, Apr 17 '21 at 18:21

juliomalves · Accepted Answer · 2021-04-17T19:49:00.747

6

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
}))

edited Apr 17 '21 at 19:49

answered Apr 17 '21 at 10:10

juliomalves

42,130
20
150
146

I've tried your approach and posted the results in my question. I even reinstalled node_modules but can't seem to get past this error... – yen Apr 17 '21 at 18:33
1

Obviously I have reading comprehension skills... this is what i ended up doing lol! – yen Apr 17 '21 at 19:18

Configure multiple next plugins: withMDX, withBundleAnalyzer

Update

2 Answers2

Linked