Gatsby run develop runs into error due to antd and less configuration (NPM)

Question

I am running into issues while starting the development server in local when installing the antd, less, less-loader, gatsby-plugin-less. gatsby-plugin-antd

versions: -

• "gatsby-plugin-less": "^6.20.0",
• "less": "^2.7.1",
• "less-loader": "^3.0.0",
• "gatsby-plugin-antd": "^2.2.0",
• "antd": "^3.26.11",

I am running into errors of javascript not enabled in the console here is the gatsby.config.js file for reference

module.exports = {
  // plugins: ["gatsby-plugin-chakra-ui"],
  plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-antd`,
      options: {
        javascriptEnabled: true,
        style: true,
      },
    },
    {
      resolve: `less-loader`,
      options: {
        javascriptEnabled: true,
      }
    },
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        lessOptions: {
          modifyVars: {
            "primary-color": "#00648D",
            "font-family": "Arial",
            "layout-body-background": "#66ff79",
            "table-row-hover-bg": "#E6F0FF",
            "primary-1": "#E6F0FF",
          },
        },
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /static/,
        },
      },
    },
    {
      resolve: `gatsby-plugin-s3`,
      options: {
        bucketName: "APP_S3_BUCKET",
        protocol: "https",
        hostname: APP_HOSTNAME,
        generateRoutingRules: false,
      },
    },
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/post/*`] },
    },
    "@chakra-ui/gatsby-plugin",
  ],
}

When trying to run the server, it crashes with following errors

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in D:\SMAI\LeadRescoringDashboardV2\node_modules\antd\es\style\color\bezierEasing.less (line 110, column 0)
    at processResult (D:\SMAI\LeadRescoringDashboardV2\node_modules\webpack\lib\NormalModule.js:758:19)
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\webpack\lib\NormalModule.js:860:5
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\loader-runner\lib\LoaderRunner.js:400:11
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (D:\SMAI\LeadRescoringDashboardV2\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\gatsby-plugin-less\node_modules\less-loader\dist\index.js:62:5
 @ ./node_modules/antd/es/tabs/style/index.js 2:0-22
 @ ./src/components/Labeler/index.js 10:0-28
 @ ./src/pages/post/postId.js?export=head 14:0-47 81:38-45
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 118:11-120:5
 @ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2

ERROR in ./node_modules/antd/es/tag/style/index.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/gatsby-plugin-less/node_modules/less-loader/dist/cjs.js):

Answer 1

I think you have conflicting configurations. For example I don't think this is a valid syntax or a valid Gatsby plugin:

{
  resolve: `less-loader`,
  options: {
    javascriptEnabled: true,
  }
},

Remove it and leave the rest of the configuration as is:

   {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
      },
    },

The snippet above should do the trick.