Module parse failed - using SCSS to set background image

[raindecastro]

I saw that the recent version of next-images was updated in order to fix this, but for some reason I can't get mine to work. Is there something wrong with my configuration?

module.exports = withPlugins([withBundleAnalyzer, [withImages, {}]], {
  ...antConfig,
  env: {
    PRODUCTION_API_URL: process.env.PRODUCTION_API_URL,
  },
});

[arefaslani]

@raindecastro Please make sure that you have the latest version of the next-images and also try to remove empty configurations object. I just want to see if there is a bug in next-images...

[raindecastro]

@arefaslani Thanks for the help! My next-images is currently at version 1.4.0 I tried it again without the configuration and unfortunately wasn't able to get it to work.

Here's my full next.config.js file

/* eslint-disable */
const withPlugins = require('next-compose-plugins');
const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
const lessToJS = require('less-vars-to-js');
const withImages = require('next-images');
const fs = require('fs');
const path = require('path');

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
);

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const nextConfig = {
  webpack: (config, { isServer, webpack }) => {
    const { IgnorePlugin } = webpack;

    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',
      });
    } else {
      config.plugins.push(new IgnorePlugin(/^\.\/locale$/, /moment$/));
      config.resolve.alias = {
        ...config.resolve.alias,
        '@ant-design/icons/lib/dist$': path.resolve(__dirname, `icons/index.js`),
      };
    }
    return config;
  },
};

const lessConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
};

module.exports = withPlugins([withBundleAnalyzer, withSass, withImages, [withLess, lessConfig]], {
  ...nextConfig,
  env: {
    PRODUCTION_API_URL: process.env.PRODUCTION_API_URL,
  },
});

[arefaslani]

Sorry for the late response, unfortunately, I didn't have a lot of free time to fix all the issues of the package in the past couple of months. If the problem hasn't resolved yet, please open a new issue.