Tinycolor issue

[Apidcloud]

Good evening,

I am trying to use your color picker, but I'm facing this error straight up: 'Cannot use 'in' operator to search for 'default' in undefined' - angularjs.color.picker.js:17

I have used npm to install tinycolor as well.

Here are the files I am using:

<!-- colour picker related -->
    <link rel="stylesheet" type="text/css" href="../node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.css"/>
    <link rel="stylesheet" type="text/css" href="../node_modules/angularjs-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css"/>

<script type="text/javascript" src="../node_modules/tinycolor2/dist/tinycolor-min.js"></script>
<script type="text/javascript" src="../node_modules/angularjs-color-picker/dist/angularjs-color-picker.js"></script>

Am I doing anything wrong? Thanks!

[ruhley]

Hi @Apidcloud

Everything seems to look fine.

A great place to start when creating a github issue is to also create an example of the error in an online tool like Plunker. It is also a big help to mention details about your environment. What version of angluarjs-color-picker, tinycolor, angularjs, browser and OS are you using?

[Apidcloud]

Thanks for the reply!

It seems to work with standard angular projects (plunker and locally too), but not with electron for some reason. I am only having issues with this package :(

I know it might be out of the scope of this repository, but here are the library versions I am using: "angular": "~1.4.8", "tinycolor2": "^1.4.1", "angularjs-color-picker": "^2.4.3", "electron-prebuilt": "^1.0.1"

I am also using Chrome 52.0.2743.116 and Windows 10.

Thanks!

[ruhley]

I have no experience with electron except for using Atom. If you could supply some boilerplate code using electron with the bug then I would be happy to debug it. Otherwise you may have to try to debug it yourself.

The bug will most likely be somewhere in the first few lines:

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('tinycolor2')) :
typeof define === 'function' && define.amd ? define(['tinycolor2'], factory) :
(global.AngularjsColorPicker = factory(global.tinycolor));

These lines are generated using Rollup With Babel - using the UMD (Universal Module Definition) format.

[hugomau]

Hi, I was having the same issue because I was loading angularjs-color-picker.js first and only then loading tinycolor-min.js. I changed the order and it works fine.

Also, check your javascript console messages. Are you sure you are loading 'color.picker' in the module, like this angular.module('yourApp',['color.picker']) ... ?

[Apidcloud]

@hugomau I tried exactly the same code online and in a local project without electron - both worked just as expected.

@ruhley well, last line (global.tinycolor) is supposedly returning undefined, hence the error afterwards with 'in' statement.

[ruhley]

Lets review the whole code peice

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('tinycolor2')) : // tries ES6/Nodejs???
  typeof define === 'function' && define.amd ? define(['tinycolor2'], factory) : // tries AMD/RequireJS
  (global.AngularjsColorPicker = factory(global.tinycolor)); // defaults to standard JS
}(this, function (tinycolor) { // calls the first function passing this (which is window on the browsers) and the factory function
// code here
}));

So global should be the window object. Can you copy and paste what the value of global is.

[Apidcloud]

What should I copy exactly? Window object has many properties. Window.tinycolor doesn't exist

[ruhley]

Tinycolor seems to be using the same UMD format - https://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L1183-L1193

Can you tell me which if is being run in that tinycolor block?

[juniorh2o]

Hi, I had the same problem, there must be a problem with the tinycolor min file.

Try using ../node_modules/tinycolor2/tinycolor.js instead of ../node_modules/tinycolor2/dist/tinycolor-min.js

[ruhley]

I am closing this because there has not been an update in a while. If you still need help with this problem then please re-open the issue.

[Jerryzhao-z]

found the solution in https://www.npmjs.com/package/tinycolor2 for electron, import tinycolor in index.html by var tinycolor = require("tinycolor2"); tinycolor version: 1.4.1 angular-color-picker version: 2.6.0