question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not work with babel-plugin-import

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:16 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
yutingzhao1991commented, Oct 24, 2018

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

2reactions
coreyfarrellcommented, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

babel-plugin-import - npm
Start using babel-plugin-import in your project by running `npm i babel-plugin-import`. There are 2197 other projects in the npm registry ...
Read more >
How do I use .babelrc to get babel-plugin-import working for ...
First clean up the config files you created, and make sure you have babel-plugin-import installed. Then eject your app: npm run eject. This...
Read more >
babel/preset-env
babel /preset-env` is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, ......
Read more >
babel-plugin-import | Yarn - Package Manager
babel -plugin-import. Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, and so on. NPM version Build Status ...
Read more >
babel-plugin-import examples - CodeSandbox
Learn how to use babel-plugin-import by viewing and forking babel-plugin-import example apps on CodeSandbox.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found