Next.js: Antd-design-less example with export with Next > 7.0.2

[revskill10]

Bug report

Describe the bug

The bug happens when i export static NextJS app

> [email protected] 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: '/' },
    }
  }
})

[revskill10]

@teleginzhenya I tried both ways but it still showed the same error.
Do you have any working repo for me to re-test again ? Thanks you very much.

[teleginzhenya]

@revskill10 example works well for me, it would be better if you can share your repo with me tho

[revskill10]

@teleginzhenya The example worked well with Next 7.0.2.
If you upgrade Next to 8.0.x, the error still happens.

[afuggini]

Having the same issue. Here's my next.config.js:

const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')

const themeVariables = lessToJS(
  fs.readFileSync(
    path.resolve(__dirname, './styles/antd/theme.less'),
    'utf8'
  )
)

const config = {
  webpack: (config, { dev, isServer, defaultLoaders }) => {
    // Fixes npm packages that depend on `fs` module
    config.node = { fs: 'empty' }
    return config
  },
  distDir: '../../dist/functions/next',
  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, localIdentName, localName) => {
      return localName
    }
  },
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables
  }
}

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

module.exports = withLess(config)

[Legym]

I'm using next 8.0.0. If I change my .babelrc from

{
  "presets": ["next/babel"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["import", { "libraryName": "antd", "style": true} ],
    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"],
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
  ]
}

to

{
  "presets": ["next/babel"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["import", { "libraryName": "antd", "style": "less"} ],
    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"],
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
  ]
}

So ["import", { "libraryName": "antd", "style": true} ] to ["import", { "libraryName": "antd", "style": "less"} ] will result in dev workng, but not exporting

I was able to find more info here, but i'm also unable to export
https://github.com/ant-design/babel-plugin-import/issues

Edit: I've downgraded to "next": "^7.0.2"

[maotora]

I'm facing a similar issue with with-antd example cannot export but it runs okay with npm run dev.

When I run next build && next export

> next build


✔ Client
  Compiled successfully in 2.49s

✔ Server
  Compiled successfully in 1.84s

> Using external babel configuration
> Location: "/home/niggacode/Projects/Sites/Mwenge/.babelrc"
 ┌ /
 ├ /_app
 ├ /_document
 └ /_error


> [email protected] export /home/niggacode/Projects/Sites/Mwenge
> next export

> using build directory: /home/niggacode/Projects/Sites/Mwenge/.next
  copying "static build" directory
  launching 7 threads with concurrency of 10 per thread
/home/niggacode/Projects/Sites/Mwenge/node_modules/antd/lib/style/index.css:7
body {
     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
{}

Downgrading seems to fix this.

[pacoyang]

Same issue, the code below in next.config.js work well with next build but still getting error with next export, in version "8.0.x".

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

Downgraded to "7.0.2" solve the problem.

[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.

[stephankaag]

Is anyone working on this? Or is the recommended solution to use v7 for the time being?

[revskill10]

@thecodeboss That hack/patch

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

ruined my common sense. Because i thought just using babel is enough in this case.
And as i know, it's deprecated in latest NodeJS version (require.extensions is deprecated)

[koolamusic]

What could be the solution to this issue ?

[Buhaiyang]

I have resolve this issue by manual import less not use 'babel-plugin-import'

[koolamusic]

What would be the alternative to require.extensions in Next

[pierre-b]

Hi, I'm running next 8.0.3 and still got the bug on export, any update please?

[bigwisu]

Next v8.1.0 also fails to export, I also verified that

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

is in the next.config.js.

Still, no luck exporting for v8.1.0. It does succeed after downgrading to v7.0.2

[revskill10]

This could be resolved (maybe) if nextjs allows babel for server too, not just client.

[koolamusic]

No progress yet apparently

[samuelg123]

Still waiting

[pierre-b]

same here, looking forward upgrading to v8 when it's solved!

[jimmdd]

any one tried this plugin? works for me. next-antd-aza-less, article by Steven can be found here: Also check out pending PR by steven on #6989

[tgdn]

Fix? The example fails when calling next export

[sanojsilva]

export still not working :(

[linhbkhn95]

same issue :((. who can this resolve? tks all

[samuelg123]

any update?

[aysark]

I run into other issues if i downgrade to v7.0.2 due to decorators... so there isn't a proper workaround currently :/

[koolamusic]

I think this mostly depends on environment and what other packages your app utilizes

[koolamusic]

Not sure how odd this may seem, but setting the package versions in package.json to use

"@zeit/next-less": "^1.0.1",
    "antd": "^3.5.4",
    "less": "3.0.4",
    "less-vars-to-js": "1.3.0",
    "next": "latest",

has worked for me so far

[aindong]

The problem still occurs,

> Build error occurred
{ /home/ubuntu/*/node_modules/antd/lib/style/index.css:7
body {
     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18) type: 'SyntaxError' }
Automatically optimizing pages .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ubuntu/.npm/_logs/2020-02-12T09_53_35_004Z-debug.log