babel-plugin-istanbul icon indicating copy to clipboard operation
babel-plugin-istanbul copied to clipboard

Does not work with babel-plugin-import

Open philippotto opened this issue 6 years ago • 16 comments

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.

philippotto avatar Jul 04 '18 09:07 philippotto

It looks like babel-plugin-import is a Babel 7 plugin. If you haven't already please try this with babel-plugin-istanbul@next (version 5.x). The current latest release of babel-plugin-istanbul still uses babel 6.

This would be easier to investigate if you could provide a small repo demonstrating the issue.

coreyfarrell avatar Jul 04 '18 15:07 coreyfarrell

It looks like babel-plugin-import is a Babel 7 plugin.

What makes you think so? Since v1.6.0, the plugin is compatible with Babel 7, but support wasn't dropped as far as I know.

If you haven't already please try this with babel-plugin-istanbul@next (version 5.x). The current latest release of babel-plugin-istanbul still uses babel 6.

My project uses babel 6, which is why I assume this won't fix the bug?

This would be easier to investigate if you could provide a small repo demonstrating the issue.

Ok, I'll try to get some time for that.

philippotto avatar Jul 04 '18 16:07 philippotto

https://github.com/ant-design/babel-plugin-import/blob/master/src/Plugin.js#L2 shows that it uses babel 7 modules. I do not recommend mixing babel 6 and babel 7, so if your project uses babel 6 I recommend trying again with "babel-plugin-import": "=1.5.0" for your dependency in package.json (pin to the last release before they started work on babel 7).

coreyfarrell avatar Jul 04 '18 16:07 coreyfarrell

Still has this problem when I use babel 7 and [email protected]

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 avatar Oct 24 '18 03:10 yutingzhao1991

@yutingzhao1991 same bug

afc163 avatar Oct 24 '18 03:10 afc163

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 avatar Oct 24 '18 20:10 coreyfarrell

I also encountered the same problem. The same code, using Jest for testing。

zenjava avatar Dec 10 '18 09:12 zenjava

image

zenjava avatar Dec 10 '18 09:12 zenjava

The same bug. And can anyone provide a solution? thx.

Mrjeff578575 avatar Dec 12 '18 12:12 Mrjeff578575

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 avatar Dec 24 '18 04:12 Mrjeff578575

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

yutingzhao1991 avatar Feb 13 '19 09:02 yutingzhao1991

@Mrjeff578575 have you considered submitting that patch to babel-plugin-import?

coreyfarrell avatar Feb 13 '19 15:02 coreyfarrell

the same bug.

likezero avatar Aug 08 '19 11:08 likezero

the same bug

zeel-swiggy avatar Jul 01 '20 18:07 zeel-swiggy

the same bug

zzfzfz avatar Aug 10 '20 14:08 zzfzfz

how about this bug? as @zenjava shows, maybe it's not a bug for babel-plugin-import.

likezero avatar Oct 16 '20 03:10 likezero