Using antd(React) and antd-mobile(React) in the same project

Question

I am using NextJs, and I want to know how I can configure webpack to support both antd and antd-mobile simultaneously.

Currently, not able to configure webpack correctly

Answer 1

In your next.config.js change antStyles = /antd\/.*?\/style\/css.*?/ to antStyles = /antd.*?\/.*?\/style\/css.*?/. This basically changes the regex to match antd and antd-mobile as well.

Then set your .babelrc to

{
  "presets": ["next/babel"],
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }, "antd"],
    ["import", { "libraryName": "antd-mobile", "style": "css" }, "antd-mobile"]
  ]
}