Antd-design-less example with export with Next > 7.0.2

Bug report

Describe the bug

The bug happens when i export static NextJS app

> with-ant-design-less@1.0.0 export /Users/revskill/work/kms/kms-edu/src/with-ant-design-less
> next build && next export


✔ Client
  Compiled successfully in 28.09s

✔ Server
  Compiled successfully in 16.04s

> Using external babel configuration
> Location: "/Users/revskill/work/kms/kms-edu/src/with-ant-design-less/.babelrc"
 ┌ /
 ├ /_app
 ├ /_document
 └ /_error

> using build directory: /Users/revskill/work/kms/kms-edu/src/with-ant-design-less/.next
  copying "static build" directory
  launching 3 threads with concurrency of 10 per thread
/Users/revskill/work/kms/kms-edu/src/with-ant-design-less/node_modules/antd/lib/style/index.less:1
(function (exports, require, module, __filename, __dirname) { @import './themes/default';
                                                              ^

SyntaxError: Invalid or unexpected token
    at new Script (vm.js:84:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:312:10)
    at Module._compile (internal/modules/cjs/loader.js:696:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
    at Function.Module._load (internal/modules/cjs/loader.js:560:3)
    at Module.require (internal/modules/cjs/loader.js:665:17)
    at require (internal/modules/cjs/helpers.js:20:18)
{}

To Reproduce

Upgrading antd-less-design example with following dependencies:

{
  "name": "with-ant-design-less",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next build && next export"
  },
  "dependencies": {
    "@zeit/next-less": "^1.0.1",
    "antd": "3.12.4",
    "less": "^3.9.0",
    "next": "^8.0.0-canary.17",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-import": "^1.11.0"
  }
}

next.config.js:

/* eslint-disable */
const withLess = require('@zeit/next-less')


// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => {}
}

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: {
      "@primary-color": '#1DA57A'
    }
  },
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
    }
  }
})

Expected behavior

Exporting should be successfull.

Screenshots

System information

• OS: MacOS
• Browser : chrome
• Version of Next.js: ^8.0.0-canary.17

Updated: The example worked with Next 7.0.2 , but not work with < 7.0.2 or 8.0.x

[teleginzhenya]

Hello! Did you see the example? Probably you need less-vars-to-js as it is in example.

Also try something like this

module.exports = withLess({
-  lessLoaderOptions: {
  javascriptEnabled: true,
  modifyVars: {
    "@primary-color": '#1DA57A'
+  },
-  },
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
    }
  }
})

[thecodeboss]

This require patch

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => {}
}

gets executed on the main next export process, but then when it forks to spawn a bunch of workers, they don’t have this patch and so they fail once a .less file gets required.

I can’t think of a workaround to ensure that worker processes execute that patch code prior to running their main logic.