Skip to content
This repository has been archived by the owner on Sep 16, 2023. It is now read-only.

Example to make this work with webpack / babel-loader #41

Closed
0xgeert opened this issue Mar 21, 2016 · 8 comments
Closed

Example to make this work with webpack / babel-loader #41

0xgeert opened this issue Mar 21, 2016 · 8 comments

Comments

@0xgeert
Copy link

0xgeert commented Mar 21, 2016

babel-plugin-lodash looks awesome. However, I can't get it to load in my webpack/ babel-loader pipeline.
Has anyone managed to get it to work in combination with webpack?

@viveleroi
Copy link

I have, without any issue. I added this plugin to the .babelrc config file, included lodash in my source, and presto. https://github.com/helion3/inspire-tree/tree/bundle

@brandondoran
Copy link

brandondoran commented Apr 6, 2016

I too get an error in my webpack build after adding "lodash" to .babelrc. I have not figured it out yet.

webpack --config webpack.config.js --progress --profile --colors

/Users/brandon/projects/XXXXXX/babel-core/lib/transformation/file/options/option-manager.js:243
      this.log.error("Invalid options type for " + alias, TypeError);

My problem was I added "lodash" to presets instead of plugins in .babelrc. Works like a charm once I corrected that.

@jjt
Copy link

jjt commented Apr 8, 2016

I'm facing the same issue here, and I'm wondering if it has to do with babel-plugin-resolver, which I'm using.

At index.js#L59, this check in ImportDeclaration always fails because it's getting the absolute path:

if (value.indexOf('lodash') !== -1) console.log(value);
// -> /Users/jjt/path/to/project/node_modules/lodash

// L59: This conditional always fails because it's an absolute path
if (fp || value == 'lodash') {
  // ...
}

@megawac
Copy link
Contributor

megawac commented Apr 16, 2016

@jjt interesting, would #15 work if we added support for something like

[require('babel-plugin-transform-es2015-template-literals'), { 'lodash-path': 'node_modules/lodash'}]

Though because your path there is absolute it would not be possible to transfer that logic between computers

Also if someone is interested in making a webpack example it'd be greatly appreciated

@jdalton
Copy link
Member

jdalton commented Apr 28, 2016

I've gotten the babel plugin to work in a dummy webpack project.
I'll add a doc example soon. It's basically:

  'module': {
    'loaders': [{
      'loader': 'babel',
      'test': /\.js$/,
      'exclude': /node_modules/,
      'query': {
        'plugins': ['lodash'],
        'presets': ['es2015']
      }
    }]
  }

In next release of babel-plugin-lodash will also allow you to pass the lodash package id so that it won't have to guess:

'query': {
  'plugins': [['lodash', { 'id': 'lodash-compat' }]],
  'presets': ['es2015']
}

@megawac
Copy link
Contributor

megawac commented Apr 28, 2016

Nice that was originally how I was going to solve #15

@jdalton
Copy link
Member

jdalton commented Apr 28, 2016

Nice that was originally how I was going to solve #15

This is also how we're able to test lodash, lodash-es, and lodash-compat at once too.

@jdalton
Copy link
Member

jdalton commented Apr 29, 2016

Patched with 5416a85 and 7352d96.

@jdalton jdalton closed this as completed Apr 29, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests

6 participants