TypeError: sources.map is not a function

[yemi]

First of all, thanks for a great lib, really saved me some stress about releasing a feature im working on.

So, i have a webpack.config.js with a few entry points, i tried to import webworkify-webpack in one of them (along with other imports) and use it for a heavily computational task, this didnt work by default (threw same error message as in title) so i tried adding another entry point to my webpack config that would only import this library just to see if it might work then, which it did.

However, i found out after some time that it didnt have to do with whether i imported the lib or not, but with whether sources (https://github.com/borisirota/webworkify-webpack/blob/master/index.js#L2) is an array or not, and by adding this extra empty entry point, sources became an array..

I have no idea why that happens but maybe you have a clearer understanding of this?

Webpack config without empty test entrypoint:

Webpack config with empty test entrypoint:

[borisirota]

Hmmm interesting. Well, I'm expecting the modules to be bundled in a specific way (webpack_require.m to be the modules array). Maybe the case with multiple entry points makes the bundle to be slightly different ?

@yemi, if you can show me the output of this build or even better, if you can point me to a github repo with subset of the code which causes this problem so I can fork and figure this out, it can be great !

Thanks

[borisirota]

@yemi Now I found the time to try and reproduce this issue. I couldn't. I added multiple entry points and checked if the sources is instance of Array in all of the outputs. It worked ok regardless the order in the entry object.

Which plugins do you use ?
Is it still happens in the last version of webworkify-webpack -> 1.1.1 ? I'm using webpack 1.13.1.

[yemi]

Im just on my way out to the swedish booze shop, which is closed tomorrow because its a public holiday so you have to plan ahead if you wanna get anything at all (unless you settle for 3.5% alc). So sorry for the short answer (even if its not that short, but surely unnecessary long), but, it seems to have something to do with the CommonChunks plugin. Does that help?

[Stupidism]

I encountered with this problem as well and it's easy to reproduce.
use react-redux-starter-kit which is using webpack and react-map-gl together.

• install above two things together
• see my answer of fix sourcemap of react-redux-starter-kit
• see my answer of config webpack to work with react-map-gl

And you got the error!

[borisirota]

@yemi not really. I was using the CommonChunks plugin without errors.

@stupidisum I don't understand your instructions. how to combine it ? how do you call this lib ?
From what I see in your comment, setting devtool to eval causing the error. check the first caveat please.

I just need to understand how you are using this lib and I'll find the bug (unless there is eval in devtool).

[borisirota]

@stupidisum please check #10. Is it fixes your issue ?

[Stupidism]

I debugged into the source code. It looks like sources should be an array with map method. But actually, it was a fake array in the form of object. Maybe something wrong with webpack version?

I wanted to use react-redux-starter-kit(RRSK) and react-map-gl(RMG) together. Because RRSK used webpack which is not compatible with RMG and guys in RMG recommend to use this webworkify-webpack to transform.

If I don't set devtool to eval, I got an error that can't be located in source code.

[Stupidism]

It's a lib redbox the RRSK used recommend eval and I tried and found it worked.

[Stupidism]

I changed eval back to source-map and still got this error.

[borisirota]

@stupidisum I might have a clue but I'm not able to reproduce.

Can you replace iterations over sources (here and here) with iterations over Object.keys(sources) ?

=>

...
    var keys = Object.keys(sources)
    for (var i = 0, l = keys.length; i < l; i++) {
        var key = keys[i];
        if (!sources[key]) {
            continue;
        }
        var wrapperFuncString = sources[key].toString();
...
...
...
        keys.map(function (key) {
            return sources[key].toString();
        }).join(',')
...

Did it fix it ?

I don't know why and what is the reason but sometimes when using the CommonChunks plugin, the sources is object instead of array with the same characteristics.

[Stupidism]

Actually, I tried, upon found it's an array-like object, to replace sources.map to Object.keys(sources).map(function(key) {return sources[key]}).map here. But there will be other errors somewhere else.

[Stupidism]

Did you try to use a react-map-gl in that react-redux-starter-kit?

[borisirota]

I'm not using react-redux-starter-kit.

In addition to adding support for sources as object in 2 places (I noted in my code snippet), did you check #10 ? My guess is that it fixes the other issues you faced with mapbox-gl-js (this comment). And if this the case I'll add support for the sources as object and we're done.

[borisirota]

@stupidisum I added support for sources as object in version 1.1.2.

If you make the dirty fix as noted here (until this PR will be merged), is it fixes the issue ?

[Stupidism]

I didn't get luck for this. Again.

[Stupidism]

Although I'm using react-google-maps now, I'm still glad to figure out what's wrong with react-map-gl

[borisirota]

@stupidisum I don't really understand with what you didn't get luck. With this specific issue (TypeError: sources.map is not a function) or with other issues ?

I tried to setup react-redux-starter-kit with react-map-gl. Its not working out of the box and I don't have the time now to figure out how to make it work.

I think that the fix in version 1.1.2 fixes this issue (TypeError: sources.map is not a function) and that other errors are not related to this one.

If you like to create a working repo which combines react-redux-starter-kit with react-map-gl so I can clone it and take a look, I'll be able to isolate the problem and try to fix it.

[borisirota]

I'm closing this issue because I fixed the sources.map is not a function error with adding support for webpack modules inside of object.

Feel free to reopen if this error appears again.