babel-plugin import adds extra require('antd') in the transpilled file.

[hannadrehman]

hi. i am using lerna monorepo setup for my project. where we can have multiple react projects in the same repo. which enables us to achieve maximum code re-use and shared components.

one of the requirements in to have an abstract layer on top of all libraries which in this case is antd components. we are making wrapper components over used antd components to have some default config for them and also to make our app library agnostic. (incase we want to remove antd components and use some other lib it will be painless with this approach`

so we have created a packages called elements which lives outside react project. so we have to manually transpile them with babel. and i also use babel-plugin-import for obvious reasons.

with that i noticed that our bundle size was going 1.2MB and did some digging and found all es modules are being transpiled even after using this plugin. and no console warning also for it.

i checked and saw that transpiled files have an extra require('antd') which i suppose is getting the entire library and adding to the bundle.

here is the code

es6 modules

import React from 'react';
import PropTypes from 'prop-types';

import { Alert } from 'antd';

const AppAlert = ({
  message, description, type, closable, onClose,
}) => (
  <div>
    <Alert
      message={message}
      description={description}
      type={type}
      closable={closable === true}
      onClose={onClose}
      showIcon
    />
  </div>
);

AppAlert.propTypes = {
  message: PropTypes.string.isRequired,
  description: PropTypes.string,
  type: PropTypes.string,
  closable: PropTypes.bool,
  onClose: PropTypes.func,
};
AppAlert.defaultProps = {
  closable: false,
  onClose: () => {},
  type: 'error',
  description: '',
};

export default AppAlert;

transpiled es5 module

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

require("core-js/modules/es6.object.define-property");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/es/alert/style");

var _alert = _interopRequireDefault(require("antd/es/alert"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));
// **************see this**********************************
var _antd = require("antd"); //  => this should not be here. 
// ********************************************************

(function () {
  var enterModule = require('react-hot-loader').enterModule;

  enterModule && enterModule(module);
})();

var AppAlert = function AppAlert(_ref) {
  var message = _ref.message,
      description = _ref.description,
      type = _ref.type,
      closable = _ref.closable,
      onClose = _ref.onClose;
  return _react.default.createElement("div", null, _react.default.createElement(_alert.default, {
    message: message,
    description: description,
    type: type,
    closable: closable === true,
    onClose: onClose,
    showIcon: true
  }));
};

AppAlert.propTypes = {
  message: _propTypes.default.string.isRequired,
  description: _propTypes.default.string,
  type: _propTypes.default.string,
  closable: _propTypes.default.bool,
  onClose: _propTypes.default.func
};
AppAlert.defaultProps = {
  closable: false,
  onClose: function onClose() {},
  type: 'error',
  description: ''
};
var _default = AppAlert;
var _default2 = _default;
exports.default = _default2;
;

(function () {
  var reactHotLoader = require('react-hot-loader').default;

  var leaveModule = require('react-hot-loader').leaveModule;

  if (!reactHotLoader) {
    return;
  }

  reactHotLoader.register(AppAlert, "AppAlert", "/Users/hannadrehman/workspace/open source/projects/react-production-monorepo/packages/elements/src/Alert/Alert.component.jsx");
  reactHotLoader.register(_default, "default", "/Users/hannadrehman/workspace/open source/projects/react-production-monorepo/packages/elements/src/Alert/Alert.component.jsx");
  leaveModule(module);
})();

;

i have marked the code above.

is this the expected behavour of this plugin or its a bug or my config is doing this. ??

here is my .babelrc for this package.

{
  "presets": [
    ["@babel/preset-env", { "modules": false, "useBuiltIns": "usage" }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-modules-commonjs",
    [
      "import",
      { "libraryName": "antd", "libraryDirectory": "es", "style": true }
    ]
  ],
  "env": {
    "test": {
      "presets": [["@babel/preset-env"], "@babel/preset-react"],
      "plugins": [
        "@babel/plugin-transform-modules-commonjs",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import",
        ["import", { "libraryName": "antd" }]
      ]
    },
    "development": {
      "presets": [
        ["@babel/preset-env", { "modules": false, "useBuiltIns": "usage" }],
        "@babel/preset-react"
      ],
      "plugins": [
        "react-hot-loader/babel",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-transform-modules-commonjs",
        [
          "import",
          { "libraryName": "antd", "libraryDirectory": "es", "style": true }
        ]
      ]
    }
  }
}

is use @babel/cli 7.0.0 to transpile the modules. with this command

babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx

ignore the HMR code it is not removed yet. but surely will be when building for production

[ardok]

I notice the same thing too:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _recompose = require('recompose');

var _reactRedux = require('react-redux');

var _antd = require('antd'); // whaaaaa???

I'm using these:

    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
"babel-plugin-import": "^1.9.1",

       ["import", { "libraryName": "antd", "libraryDirectory": "lib" }, "ant"],

[pkrefta]

Guys,

Can this be causing

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

message in my console all the time ?

[achepukov]

@pkrefta I had same issue, and the root case was in: import { Button } from 'antd/lib/index', replacing it with import { Button } from 'antd' fixes the issue.

[xwinstone]

i have same problem!!! who can resolve it !!!!!!!!!!!!