Error with webpack: Module not found: Error: Can't resolve 'onecolor'

[oshihirii]

I have a folder of 3rd party JS files (jQuery plugins and Javascript libraries).

I am trying to bundle them into a single file with webpack.

Below is relevant part of webpack.config.json:

var glob = require("glob");

module.exports = {
    entry: {
        js:  glob.sync("./src/js/*.js")
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist/js")
    }

When I run webpack, I get these errors relating to colorjoe.js:

ERROR in ./src/js/colorjoe.js
Module not found: Error: Can't resolve 'onecolor' in 'C:\Users\Me\Documents\my_repo\src\js'
@ ./src/js/colorjoe.js 7:33-52 9:8-37

Version information in that file is:

 /*! colorjoe - v2.0.0 - Juho Vepsalainen <*****@gmail.com> - MIT
 https://bebraw.github.com/colorjoe - 2016-08-12 */
 /*! dragjs - v0.7.0 - Juho Vepsalainen <*****@gmail.com> - MIT
 https://bebraw.github.com/dragjs - 2016-08-12 */

(Here is link to the 2.0.0 release - I am using an older version because newer versions don't seem to "work" with the way I have implemented it).

Do you know what changes I would need to make in this file in order to get rid of that error?

Thank You.

[oshihirii]

Update, I get the same error using the latest version of the files too, ie:

https://github.com/One-com/one-color/blob/master/one-color.js

https://github.com/bebraw/colorjoe/blob/master/dist/colorjoe.js

ERROR in ./src/js/colorjoe.js
Module not found: Error: Can't resolve 'ONECOLOR' in 'C:\Users\Me\Documents\my_repo\src\js'
@ ./src/js/colorjoe.js 9:8-11:10

So I tried using the following src files instead of the dist file:

https://github.com/bebraw/colorjoe/blob/master/src/colorjoe.js
https://github.com/bebraw/colorjoe/blob/master/src/extras.js
https://github.com/bebraw/colorjoe/blob/master/src/utils.js

Import statements are now:

import one from './one-color';
import extras from './extras';
import utils from './utils';
import colorjoe from './colorjoe';

And now I get error on frontend in chrome dev tools:

Uncaught ReferenceError: extras is not defined at eval (webpack:///./src/js/colorjoe.js?:75)

Relevant code there is:

for (var k in extras) {
    colorjoe.registerExtra(k, extras[k]);
}

https://github.com/bebraw/colorjoe/blob/master/src/colorjoe.js#L73

[oshihirii]

I'm not sure if this is the issue as I know very little about webpack...

I saw in the above code snippet, extras hadn't been defined, so I just copied all content from the extras file and pasted it at the top of the colorjoe file (in https://github.com/bebraw/colorjoe/tree/master/src).

The error went away, but I'm still not sure if colorjoe will work as I am still troubleshooting other issues.

[oshihirii]

Now I get errors like:

Uncaught TypeError: _colorjoe2.default.hsl is not a function

triggered by the webpack generated code:

global.joe = _colorjoe2.default.hsl('hslPicker', color, ['currentColor', ['fields', { space: 'RGB', limit: 255, fix: 2 }]]);

which is like this in the source:

global.joe = colorjoe.hsl('hslPicker', color, ['currentColor', ['fields', { space: 'RGB', limit: 255, fix: 2 }]]);

[bebraw]

Hi,

I repackaged the whole thing. You should be able to consume it from npm directly now. It comes with the extras too although the API can likely be improved further.