Next.js: Next.js 9 doesn't work with Antd on build

[phakphumi]

When I try to run next build on the docker container below error appear.

`

Build error occurred
{ /usr/src/app/node_modules/antd/lib/style/index.less:1
@import './themes/default';
^

SyntaxError: Invalid or unexpected token
at Module._compile (internal/modules/cjs/loader.js:721:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/usr/src/app/node_modules/antd/lib/button/style/index.js:3:1)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) type: 'SyntaxError', '$error': '$error' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`

By the way, this error doesn't appear when I run next start.

Any idea.

[kachkaev]

Please share a reproduction. Here is the official example, with which you may want to check first: https://github.com/zeit/next.js/tree/canary/examples/with-ant-design

[phakphumi]

For reproduction, I use this package and have the configuration follow read me.

I will try to apply the official solution to my project and will update to you.

[phakphumi]

The official example works fine on my project but unfortunately, the code in the example file can't enable cssModule. Enable cssModule cause all Antd styling disappear.

Reproduction:

• Just add cssModules: true in withCss option

My code within next.config.js

module.exports = { ...withSass(withCss({ cssModules: true, cssLoaderOptions: { importLoaders: 1, localIdentName: '[local]___[hash:base64:5]', }, lessLoaderOptions: { javascriptEnabled: true, modifyVars: themeVariables, // make your antd custom effective }, webpack: (config, { isServer }) => { if (isServer) { const antStyles = /antd\/.*?\/style\/css.*?/ const origExternals = [...config.externals] config.externals = [ (context, request, callback) => { 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 }, })), }

@kachkaev

[luffyZh]

The same question, Next 9 with antd less occur the same error in the production.

[macalinao]

we have the same problem

[Viin-zx]

we have the same problem

[grrowl]

I had this problem, and here's how I fixed it:

• Copy the isServer related code from https://github.com/zeit/next.js/blob/canary/examples/with-ant-design/next.config.js into my next.config
• Don't use next-transpile-modules on ant.d
• Ensure babel-plugin-import is in your .babelrc as seen in https://github.com/zeit/next.js/blob/canary/examples/with-ant-design/.babelrc

[timneutkens]

I'm going to close this issue as it doesn't follow the issue template and isn't directly related to the example, as said the example seems to work.

[videni]

@luffyZh , @phakphumi, how did you solve this problem? the example works, however I did everything as the example , it simply just doesn't work. I also did as @grrowl said, I checked the .babelrc and the less configuratoin lots of times.

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["relay", { "artifactDirectory": "./src/__generated__" }],
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

next.config.js

require('dotenv').config();
const lessToJS = require('less-vars-to-js');

const slash = require('slash');
const withLess = require('@zeit/next-less');
const fs = require('fs');
const path = require('path');
const Dotenv = require('dotenv-webpack');

const withImages = require('next-images');

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './src/themes/default.less'), 'utf8')
);

const config = withImages(withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables
  },
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    );

    config.resolve.alias = {
      ...config.resolve.alias,
      'react-jsonschema-form': '@vidyvideni/react-jsonschema-form',
      '@': path.resolve(__dirname, 'src'),
    };

    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules\/react-relay-network-modern/,
      type: 'javascript/auto',
    });
    config.resolve.extensions.push('.mjs');

    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          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;
  },

  cssLoaderOptions: {
    modules: false,
    getLocalIdent: (
      context,
      _,
      localName,
    ) => {
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less')
      ) {
        return localName;
      }

      const match = context.resourcePath.match(/src(.*)/);

      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = slash(antdProPath)
          .split('/')
          .map((a) => a.replace(/([A-Z])/g, '-$1'))
          .map((a) => a.toLowerCase());

        return `acme${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }

      return localName;
    },
  }
}));

module.exports = {
  useFileSystemPublicRoutes: false,
  ...config
};

[luffyZh]

@videni emm...my scaffold is next-antd-scaffold.it works, can go&&see.

[videni]

@luffyZh , your scaffold is not helpfull for me, I am just need to know

1. Why less files of Antd matching /antd\/.*?\/style.*?/ are excluded from server webpack.

2. Since they are excluded using null-loader, why they are still loaded? that is why I have following error.

/Users/john/www/acme-admin-ui/node_modules/antd/lib/style/index.less:1
@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Object.require.extensions.<computed> [as .js] (/Users/john/www/acme-admin-ui/node_modules/ts-node/src/index.ts:529:44)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/john/www/acme-admin-ui/node_modules/antd/lib/layout/style/layout/style/index.jsx:1:1)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Object.require.extensions.<computed> [as .js] (/Users/john/www/acme-admin-ui/node_modules/ts-node/src/index.ts:529:44)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/john/www/acme-admin-ui/node_modules/@ant-design/pro-layout/lib/BasicLayout.js:10:1)