Next.js: SyntaxError for @import when building with NextJS 9, not during development

[Kombustor]

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]

We are having the same exact issue. I tried following other posts as well as the official Next/Antd example to no avail. Everything was working just perfectly in v8 but just build breaking in v9. One can only stare at babelrc, next config, and webpack for so long before losing their mind, ha!

Wish I could be of more help. Will definitely post back if I figure out a non-hacky solution.

[farhadniaz]

Also, We having the same exact issue. !!!!! any solution with Nextjs 9.0.2?

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

[Andy671]

Having the same issue.

[farhadniaz]

@Kombustor @taylorhayduk @Andy671 @toolmantim I end up to use

babel-plugin-inline-import

and now it working .
just install this packages and setup them in your .babelrc

{ 
   .....
    "plugins": [       
    ["babel-plugin-root-import"]
  ]
  }

[mengxuhui]

@Kombustor @taylorhayduk @Andy671 @toolmantim I end up to use

babel-plugin-inline-import

and now it working .
just install this packages and setup them in your .babelrc

{ 
   .....
    "plugins": [       
    ["babel-plugin-root-import"]
  ]
  }

[Vikingama]

[taylorhayduk]

I've noticed I only get this error when setting the babel import plugin for antd's style to 'true'.

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true // Build only breaks when this is true.
      }
    ]
  ]
}

I've also put in the "isServer" script in in next.config.js as per the next/antd example and played whack-a-mole with other bugs with the Next9 Upgrade. It all seems to come down this style being true.

[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
  },

[TillaTheHun0]

I was able to get NextJS 9 / Antd with custom theming working in both development and production with this example here: https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less

[zhangwei900808]

@taylorhayduk if I have two UI framework ant-design(.less) and hiynn-design(.scss)，how to setting next.config.js

webpack: (config, { isServer }) => {
    console.log("isserver=", isServer);

    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const hiynnStyles = /hiynn-design\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles) || request.match(hiynnStyles)) {
            return callback();
          }
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];
      config.module.rules.push(
        {
          test: antStyles,
          use: "null-loader"
        },
        {
          test: hiynnStyles,
          use: "null-loader"
        }
      );
    }
    return config;
  }

the up is my next.config.js，when I run 'yarn build' is error

[zhangwei900808]

anybody can help me?

[Timer]

Closing in favor of #9830