v0.2.6 :: tinypicker isn't defined when using webpack2

[mih-kopylov]

I'm using webpack. I've added md-color-picker to my package.json, then I've added require('md-color-picker'), but I've faced with this:

mdColorPicker.min.js:formatted:1 Uncaught ReferenceError: tinycolor is not defined
    at Object.<anonymous> (mdColorPicker.min.js:formatted:1)
    at __webpack_require__ (bootstrap 0e0661051eead7bca74f:54)
    at Object.ELEMENT_NODE (mdColorPicker.min.js:formatted:1)
    at __webpack_require__ (bootstrap 0e0661051eead7bca74f:54)
    at webpackJsonpCallback (bootstrap 0e0661051eead7bca74f:25)
    at mdColorPicker.min.js:formatted:1

Looks md-color-picker itself relies that tinycolor will always be in global scope. But in tinycolor theres a definition:

// Node: Export function
if (typeof module !== "undefined" && module.exports) {
    module.exports = tinycolor;
}
// AMD/requirejs: Define the module
else if (typeof define === 'function' && define.amd) {
    define(function () {return tinycolor;});
}
// Browser: Expose to window
else {
    window.tinycolor = tinycolor;
}

Could you please fix

[mih-kopylov]

To make it work there's a workaround:

window.tinycolor = require("tinycolor2");
require("md-color-picker")

But it's ugly, as there's no need to litter the global window scope

[aberenyi]

then don't :)

Use the expose-loader webpack module.

'expose-loader?tinycolor!tinycolor2',
'md-color-picker'

[mih-kopylov]

@aberenyi looks expose-loader do the same, doesn't it? It puts the module into the global scope window. It's not a good idea, it's just a more tricky way to do window.variable = reuire("module") My request is about having a clear way to use modules and avoid usgin global variables :)

[aberenyi]

You're right, sorry I misunderstood your question.

What you could try is to import both packages just before you define the module.

import * as tinycolor from 'tinycolor2'
import * as mdColorPicker from 'md-color-picker'

angular.module('yourApp', [..., 'ngMaterial', 'ngCookies', 'mdColorPicker']);

Have not tried this, but in theory it could work.

[mih-kopylov]

Unfortunately this won't work as well, (although I haven't tried it, but it shouldn't) because it's not about module import order, it's about a dependency of md-color-picker module from window.tinycolor variable.

And the request is about excluding this dependency in favour of tinycolor2 module import inside the module