babel-plugin-istanbul: Does not work with babel-plugin-import

Hi,

when combining this plugin with babel-plugin-import, the compilation drops import/require statements. For example,

import { Table, Input } from "antd";

const { Column } = Table;
const { Search } = Input;

with this .babelrc:

{
    ...
    plugins: [
        ["import", { libraryName: "antd" }],
        "istanbul"
      ],
}

results in this output:

"use strict";

var cov_hq3awr3ym = function () {
  var path = "...",
      hash = "a233b011d34ec8bb2cd83adfac23c4ca7cdfbed9",
      Function = function () {}.constructor,
      global = new Function('return this')(),
      gcv = "__coverage__",
      coverageData = {
    path: "...",
    statementMap: {
      "0": {
        start: {
          line: 3,
          column: 19
        },
        end: {
          line: 3,
          column: 24
        }
      },
      "1": {
        start: {
          line: 4,
          column: 19
        },
        end: {
          line: 4,
          column: 24
        }
      }
    },
    fnMap: {},
    branchMap: {},
    s: {
      "0": 0,
      "1": 0
    },
    f: {},
    b: {},
    _coverageSchema: "332fd63041d2c1bcb487cc26dd0d5f7d97098a6c"
  },
      coverage = global[gcv] || (global[gcv] = {});

  if (coverage[path] && coverage[path].hash === hash) {
    return coverage[path];
  }

  coverageData.hash = hash;
  return coverage[path] = coverageData;
}();

var _ref = (cov_hq3awr3ym.s[0]++, Table);

const Column = _ref.Column;

var _ref2 = (cov_hq3awr3ym.s[1]++, Input);

const Search = _ref2.Search;

where Table and Input are never defined.

About this issue

Original URL
State: open
Created 6 years ago
Comments: 16 (4 by maintainers)

Most upvoted comments

Still has this problem when I use babel 7 and istanbul@5.x

a small repo demonstrating the issue: https://github.com/yutingzhao1991/istanbul-import-bugreport

see https://github.com/yutingzhao1991/istanbul-import-bugreport/blob/master/lib/index.js#L53 , uniq is undefined

yutingzhao1991 on Oct 24, 2018

I can confirm this, thank you for the demo repository. Interesting note this works when I do a two-stage tranformation. I created the following babel.config.js:

module.exports = {
  env: {
    step1: {
      presets: ['@babel/preset-env'],
      plugins: [
        ['import', {
          libraryName: 'lodash',
          libraryDirectory: '',
          camel2DashComponentName: false,
        }, 'lodash']
      ]
    },
    step2: {
      plugins: [['istanbul', {useInlineSourceMaps: false}]]
    }
  }
};

Then ran:

NODE_ENV=step1 npx babel src --out-dir tmp
NODE_ENV=step2 npx babel tmp --out-dir lib

This produced what I expected to see in lib/index.js. I’m not sure what the cause/solution is. Obviously I’m not suggesting that step1 / step2 setup is a solution, just a possible clue.

coreyfarrell on Oct 24, 2018

A temporary way: const { Option } = Select; -> const Option = Select.Option;

yutingzhao1991 on Feb 13, 2019

I find a way to solve this problem, maybe it’s a not perfect way, but I hope it can bring some inspiration to you. https://github.com/ant-design/babel-plugin-import/commit/07cf344327fecf2963273166d0e0b357cc0448ef

Mrjeff578575 on Dec 24, 2018