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.

How to add babel-plugin-transform-imports

See original GitHub issue

Can you explain how to use this: https://github.com/GoogleChromeLabs/webpack-libs-optimizations/blob/master/README.md#react-router in my config-overrides.js?

I need to use babel-plugin-transform-imports to strip unused modules:

// .babelrc
{
  "plugins": [
    ["transform-imports", {
      "react-router": {
        "transform": "react-router/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

in:

module.exports = override(
  ...addBabelPlugin('transform-imports')
);

HOW TO?

I’will PR the Readme file with your answer for newbies like me.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
FezVrastacommented, May 6, 2019

You just have to pass the plugin configuration like you’d do in normal webpack.

module.exports = override(
  addBabelPlugin(["transform-imports", {
      "react-router": {
        "transform": "react-router/${member}",
        "preventFullImport": true
      }
    }])
);
0reactions
frederikhorscommented, May 6, 2019

Ok, thanks, but I have problem with this line:

transform: 'react-router/${member}'

I think is not a valid javascript code.

If I use instead this one:

transform: `react-router/${member}`

it complains about member is not defined of course.

I think I’m missing something. But what?

Read more comments on GitHub >

github_iconTop Results From Across the Web

babel-plugin-transform-imports - npm
Start using babel-plugin-transform-imports in your project by running `npm i babel-plugin-transform-imports`. There are 149 other projects ...
Read more >
babel-plugin-transform-imports - GitHub
babel -plugin-transform-imports. Transforms member style imports: import { Row, Grid as MyGrid } ...
Read more >
babel-plugin-transform-imports/README.md - UNPKG
1, # babel-plugin-transform-imports. 2. 3, Transforms member style imports: 4. 5, ```javascript. 6, import { Row, Grid as MyGrid } from 'react-bootstrap';.
Read more >
babel/plugin-transform-modules-commonjs
This plugin transforms ECMAScript modules to CommonJS. Note that only the syntax of import/export statements ( import "./mod.js" ) and import expressions ...
Read more >
babel-plugin-transform-import - npm package - Snyk
babel -plugin-transform-import · Transforms member style imports (import {x} from 'y') into default style imports (import x from 'y/lib/x') For ...
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