How to import multiple ui libraries using fixBabelImports in ReactJS

Question

I'm trying to use two ant design ui libraries together with fixBabelImports namely Ant Design(for desktop browser) and Ant Design Mobile(for mobile browser). I tried the following methods, both works without console error, but i'm not sure which method is correct.

Method 1

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const theme = require('./package.json').theme;

module.exports = override( 
    fixBabelImports('antd', {
        libraryName: 'antd',
        libraryDirectory: 'es',    
        style: true,
      }),
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true
    }), 
    addLessLoader({
        javascriptEnabled: true        
    })
);

Method 2

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const theme = require('./package.json').theme;

module.exports = override(     
    fixBabelImports('import', {
        libraryName: ['antd-mobile', 'antd'],
        style: true
    }), 
    addLessLoader({
        javascriptEnabled: true
    })
);

Answer 1

Accord to the customize-cra's API docs, method 1 is right.

The example of addExternalBabelPlugins(plugins) in the doc:

module.exports = override(
  disableEsLint(),
  ...addExternalBabelPlugins(
    "babel-plugin-transform-do-expressions",
    "@babel/plugin-proposal-object-rest-spread"
  ),
  fixBabelImports("lodash", {
    libraryDirectory: "",
    camel2DashComponentName: false
  }),
  fixBabelImports("react-feather", {
    libraryName: "react-feather",
    libraryDirectory: "dist/icons"
  })
);