时间戳

首页 > 解决方案 > 配置多个next插件：withMDX、withBundleAnalyzer

reactjs - 配置多个next插件：withMDX、withBundleAnalyzer

问题描述

我使用next.config.js中已经附带的 tailwind 博客启动器创建了一个nextjswithBundleAnalyzer站点。

我现在正试图让.mdx文件直接从页面工作。文档说我需要withMDX在我的 nextjs.config 文件中。怎么让两个人一起玩？我应该只保留其中一个吗？我已经安装next-compose-plugins但不知道如何设置它。

更新

这是我的下一个配置文件；它仍然失败。错误：

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

标签： reactjsnext.jsmdxjs

解决方案

正如你提到的，你可以next-compose-plugins像这样使用

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

编辑：这是您的完整配置文件：

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

推荐阅读