Как настроить nextjs 9 и ant design меньше совместимости?

После обновления _1 _, _ 2_ и nextjs возникает эта ошибка:

Произошла ошибка сборки /home/lenovo/.../node_modules/antd/lib/style/index.css:7 body {^

SyntaxError: неожиданный токен {в 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) {type: 'SyntaxError', '$ error': '$ error'} events.js: 180 throw er; // Необработанное событие «ошибка» ^ Ошибка: записать EPIPE ... в processTicksAndRejection (internal / process / task_queues.js: 77: 11) Произошло событие «ошибка» в: at internal / child_process.js: 810: 39 в processTicksAndRejection ( internal / process / task_queues.js: 75: 11) {errno: 'EPIPE', code: 'EPIPE', syscall: 'write'} ошибка Ошибка команды с кодом выхода 1. info Посетите https://yarnpkg.com/en/docs/cli/run для документации по этой команде.

Это мой 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,
);

Вы знаете, что в этом плохого?

Изменить

Кажется, есть проблема совместимости с дизайном муравьев, и я нашел некоторые источники, но не понимаю!


reactjs next.js react-dom antd
person Afsanefda    schedule 18.08.2019    source источник
comment
Это не помогает. Проблема в дизайне муравьев и совместимости с nextjs!   -  person Afsanefda    schedule 18.08.2019

Ответы (1)


arrow_upward
8
arrow_downward

На основе этого примера в репозитории Next.js https://github.com/zeit/next.js/tree/canary/examples/with-ant-design

Чтобы решить эту проблему, добавьте эти строки в свой 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,
);
person majid savalanpour    schedule 18.08.2019