Using babel-plugin-import still gets warning

[collinpage]

I searched everywhere but I can't find an answer that works for me.

Here is our webpack config:

//process.env.NODE_ENV = 'production'

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');


const pkgPath = path.resolve(__dirname, 'package.json');
const pkg = fs.existsSync(pkgPath) ? require(pkgPath) : {};
let theme = {};

if (pkg.theme && typeof pkg.theme === 'string') {
  let cfgPath = pkg.theme;
  // relative path
  if (cfgPath.charAt(0) === '.') {
    cfgPath = path.resolve(__dirname, cfgPath);
  }
  const getThemeConfig = require(cfgPath);
  theme = getThemeConfig();
} else if (pkg.theme && typeof pkg.theme === 'object') {
  theme = pkg.theme;
}

module.exports = {
  entry: './src/client.js',

  output: {
    path: path.join(__dirname, 'build'),
    filename: 'js/bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/],
        use: {
          loader: 'babel-loader',
          query: {
            plugins: ['transform-object-assign', ['import', { libraryName: 'antd' }]],
            presets: ['es2015', 'stage-0', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: 'less-loader',
            options: {
              modifyVars: theme
            }
          }
        ]
      },
      {
        test: /\.(svg|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          query: {
            name: 'build/img/[name].[ext]',
            limit: 10000
          }
        }
      },
      {
        test: /\.(eot|ttf)$/,
        use: {
          loader: 'file-loader',
          query: {
            name: 'build/img/[name].[ext]'
          }
        }
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
          loader: 'file-loader',
          query: {
            name: 'assets/[name].[ext]'
          }
        }
      }
    ]
  },

  plugins: [
    // Transmit Docker env variables to the browser, fallback to dev if not present
    // (in development, the build is run outside Docker)
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
      API_URL: 'hidden',
      API_PORT: '3078'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ],

  // Automatically transform files with these extensions
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules']
  }
};

Any ideas why I still get the warning?

[faradaytrs]

Same here but i use create-react app and the following config:

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

module.exports = override(
    fixBabelImports('antd', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    fixBabelImports('ant-design-pro', {
        libraryName: 'ant-design-pro',
        libraryDirectory: 'lib',
        style: true,
        camel2DashComponentName: false
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {},
    }),
);

And everything seems to work fine for ant-design-pro! I only use one component from there in one place and only that component is imported

[collinpage]

Anyone not using CRA knows what's the issue here?

[kbzowski]

Warning is still present in antd 4.1.3 and customize-cra 0.9.1 with the configuration as above