Next build command fails: error Command failed with exit code 1

Question

I need to add antd to my next project. But it fails by running next build command:

Build error occurred
{ /Users/macbook/Documents/myapp/node_modules/antd/lib/style/index.css:7
body {
     ^

SyntaxError: Unexpected token {

next.config.js file

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const BrotliPlugin = require('brotli-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const withImages = require('next-images');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
if (typeof require !== 'undefined') {
  require.extensions[".css"] = file => {}; // eslint-disable-line
}
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,
);

I think there is a problem with less loader in webpack because as far as I know, ant design needs less loader to have complied.

Do you have any idea how to fix this issue?

evgeni fotia · Accepted Answer · 2019-07-27 16:59:45Z

1

Use the latest Next.js version there was an error in the 8th version

answered Jul 27, 2019 at 16:59

evgeni fotia

4,8003 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emanuele Scarabattoli · Accepted Answer · 2019-07-26 15:38:23Z

0

Yes, it seems that your Webpack miss the configuration about CSS, you, probably, have to configure webpack css loader in a way like this

// Configuration of css loader to process .css files
{
  test: /\.css$/,
  use: [
    {
      loader: "style-loader"
    },
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[name]_[local]_[hash:base64]"
        }
      }
    }
  ]
},

answered Jul 26, 2019 at 15:38

Emanuele Scarabattoli

4,4601 gold badge14 silver badges26 bronze badges

2 Comments

Afsanefda Over a year ago

Where should I put that exactly?

Afsanefda Over a year ago

And also nextjs provides a plugin = > const withCss = require('@zeit/next-css'); for handling css files. which is added currently.

Collectives™ on Stack Overflow

Next build command fails: error Command failed with exit code 1

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related