Not working with webpack?

[MattFromGer]

When trying to pack the module with webpack, I get the following output:

[...]
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/*! npm.im/object-fit-images 3.1.3 */
var OFI = 'bfred-it:object-fit-images';
var propRegex = /(object-fit|object-position)\s*:\s*([-\w\s%]+)/g;
[...]

Meaning, webpack cuts off the global variable 'objectFitImages', thus I cannot get it to work.

[fregante]

When you use webpack you don't have global variables.

Webpack 1

Use require in your entry file:

var objectFitImages = require('object-fit-images');
objectFitImages('img');

Webpack 2

Use import in your entry file:

import objectFitImages from 'object-fit-images';
objectFitImages('img');

[MattFromGer]

Ah, I see, thank you!

[MattyBalaam]

I can't get this to work either. I'm using WebPack 2.3.3

Using the code specified I get:

TypeError: objectFitImages is not a function

If I try a console log on that var I get Object {__esModule: true, default: function}

I have included what another require looks like

[MattyBalaam]

@bfred-it the only way I have been able to get this to work as expected is to use

const objectFitImages = require('object-fit-images').default

[fregante]

Thanks for the followup!

It looks like webpack 2 picks up the ES module version even with require. I updated my first comment and I'm reopening this in case anyone else needs it.

[fregante]

🎉 If you use object-fit-images version 3.2.0, you can use either require or import without any issues in webpack 2

# run this to get the latest ofi version
npm update object-fit-images --save