SyntaxError for @import when building with NextJS 9, not during development

Bug report

SyntaxError for less @import statement during bundling.

> next build

Creating an optimized production build ...

> Using external babel configuration
> Location: "/workspace/.babelrc"
Compiled successfully.

> Build error occurred
{ /workspace/node_modules/antd/lib/style/index.less:1
@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/workspace/node_modules/antd/lib/time-picker/style/index.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) type: 'SyntaxError', '$error': '$error' }

Describe the bug

When using next in development, everything just works fine. The theme under ./assets/antd-theme.less is applied and can be changed, the antd-components render just fine. Using next build for production usage throws the error above.

To Reproduce

Demo repository here: https://github.com/Kombustor/next-import-bug-demo

1. Clone repository
2. npm install
3. next => working fine
4. next build => Error

Expected behavior

To create the production build without throwing an error.

System information

• OS: ArchLinux
• Version of Next.js: 9.0.2

Additional context

I know it’s the same issue as in #7957 and #8054 but it was working perfectly fine like this in NextJS 8 (check out the next8 branch), without any hacky CSS webpack configuration etc. Please check the repository and how simple it’s configured compared to the solutions mentioned in these issues before closing mine.

[taylorhayduk]

You’ll need to use the webpack config here if you’re using less by setting the babel import antd style to true (see by babelrc above). https://github.com/zeit/next.js/blob/master/examples/with-ant-design-less/next.config.js

If you aren’t using less, I think you should be able to use const antStyles = /antd\/.*?\/style\/css.*?/; below instead. This threw me for a loop for such a long time as I was using this incorrect-for-my-use-case regex.

If you ARE using less (i.e. setting style to true in babel), try the following:

  webpack: (config, { isServer }) => {
    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',
      })
    }
    return config
  },

[Kombustor]

I actually got it working by adding the isServer block from this example to my next.config.js! @taylorhayduk @farhadniaz

But this is still only a workaround and not a fix, since it’s working without it in next 8.