如何配置nextjs 9和ant design兼容性差?

问题描述

升级 react、react-dom 和 nextjs 后出现此错误:

After upgrading react,react-dom and nextjs this error happens :

发生构建错误/home/lenovo/.../node_modules/antd/lib/style/index.css:7身体 {^

SyntaxError: Unexpected token {在 Module._compile (internal/modules/cjs/loader.js:720:22)

SyntaxError: Unexpected token { at Module._compile (internal/modules/cjs/loader.js:720:22)

在 Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)在 Module.load (internal/modules/cjs/loader.js:643:32) {类型:'语法错误'，$错误":$错误"}事件.js:180投掷者；//未处理的错误"事件^错误:写入 EPIPE...在 processTicksAndRejections (internal/process/task_queues.js:77:11)在以下位置发出错误"事件:在内部/child_process.js:810:39在 processTicksAndRejections (internal/process/task_queues.js:75:11) {错误号:'EPIPE'，代码:'EPIPE'，系统调用:'写'}错误命令失败，退出代码为 1.信息访问 https://yarnpkg.com/en/docs/cli/run 了解有关此命令的文档.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10) at Module.load (internal/modules/cjs/loader.js:643:32) { type: 'SyntaxError', '$error': '$error' } events.js:180 throw er; // Unhandled 'error' event ^ Error: write EPIPE ... at processTicksAndRejections (internal/process/task_queues.js:77:11) Emitted 'error' event at: at internal/child_process.js:810:39 at processTicksAndRejections (internal/process/task_queues.js:75:11) { errno: 'EPIPE', code: 'EPIPE', syscall: 'write' } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

这是我的 next.config.js:

const nextConfig = {
    distDir: '_next',

    onDemandEntries: {
        maxInactiveAge: 1000 * 60 * 60,
        pagesBufferLength: 5,
    },

    webpack: (config, { dev }) => {
        !dev &&
        config.plugins.push(
            new BrotliPlugin({
                asset: '[path].br[query]',
                test: /.js$|.css$|.html$/,
                threshold: 10240,
                minRatio: 0.7,
            }),
        );

        !dev &&
        config.plugins.push(
            new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /.js$|.css$|.html$/,
                threshold: 10240,
                minRatio: 0.7,
            }),
        );
        return config;
    },
};

module.exports = withPlugins(
    [
        [withImages],
        [withCss],
        [
            withSass,
            {
                cssModules: true,
                cssLoaderOptions: {
                    localIdentName: '[path]___[local]___[hash:base64:5]',
                },
            },
        ],
        [withBundleAnalyzer],
    ],
    nextConfig,
);

你知道这有什么问题吗?

Do you know what is wrong with this?

编辑

似乎 ant design 存在兼容性问题，我发现 一些来源 但还是不明白！

It seems there is a compatibility problem with ant design and I found some sources but not get it though!

推荐答案

基于 Next.js 仓库中的这个例子https://github.com/zeit/next.js/tree/canary/examples/with-ant-design

Based on this example in the Next.js repositoryhttps://github.com/zeit/next.js/tree/canary/examples/with-ant-design

要解决此问题，请将这些行添加到您的 next.config.js:

To resolve this problem, add these lines to your next.config.js:

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd/.*?/style/css.*?/;
      const origExternals = [...config.externals];
      config.externals = [ // eslint-disable-line
        (context, request, callback) => { // eslint-disable-line
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }
    return config;
  },
};

next.config.js 文件的示例:

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');

if (typeof require !== 'undefined') {
  require.extensions['.css'] = file => {};
}

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd/.*?/style/css.*?/;
      const origExternals = [...config.externals];
      config.externals = [ // eslint-disable-line
        (context, request, callback) => { // eslint-disable-line
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }
    return config;
  },
};

module.exports = withPlugins(
  [
    [withCss],
    [
      withSass,
      {
        cssModules: true,
        cssLoaderOptions: {
          localIdentName: '[path]___[local]___[hash:base64:5]',
        },
      },
    ],
  ],
  nextConfig,
);

这篇关于如何配置nextjs 9和ant design兼容性差?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！