React-map-gl: consuming later versions of mapbox-gl w/ flow through react-map-gl throws flow annotation errors

[abmai]

After upgrading react-map-gl to point to any mapbox-gl versions >= 0.27.0 with flow annotations, consuming apps (e.g. apps that install and use react-map-gl) run into flow annotation errors from mapbox-gl's code. For some reason it seems like the browserify transforms in mapbox isn't working when it's being used indirectly?

some relative paths below were removed for brevity

/Users/~/node_modules/mapbox-gl/js/util/util.js:15
exports.easeCubicInOut = function(t: number): number {
                                   ^
SyntaxError: Unexpected token :
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/~/node_modules/mapbox-gl/js/util/window.js:6:14)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/~/node_modules/mapbox-gl/js/util/browser.js:8:16)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/~/node_modules/mapbox-gl/js/mapbox-gl.js:3:17)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (../src/map.react.js:24:1)

FWIW - developing and running examples inside react-map-gl work correctly.

I've also tried to make react-map-gl point to the bundled version of mapbox-gl (mapbox-gl/dist/mapbox-gl.js), which produces the error ReferenceError: self is not defined.

@lucaswoj do you have any insights here?

[abmai]

Looks like tacking on a postinstall flow-remove-types script on all the mapbox-gl files work. e.g.

flow-remove-types ./node_modules/mapbox-gl/js/**/*.js --out-dir .

It feels like a hack, though.

[haddoq]

The postinstall fails on windows with npm and yarn.

npm ERR! [email protected] postinstall: if [ -d '../mapbox-gl' ]; then flow-remove-types ../mapbox-gl/js/**/*.js --out-dir . > /dev/null; fi
-d was unexpected at this time.

[balthazar]

What version of node are you on? What shell do you use? cygwin?

[abmai]

@haddoq what version of Windows are you running, and was this with or without Bash shell?

[haddoq]

Im running windows 10 pro. Node 7.3.0. Running cmd.exe with "Use Git and optional Unix tools from the Windows Command Prompt"

[abmai]

@haddoq were you able to get a working command for Windows? I haven't gotten around to looking at this yet but I'll be able to get a better solution for it next week.

[haddoq]

@abmai Its works now with the changes in v2.0.1. Thanks.

[abmai]

Great! Thank you for confirming!

[tushardhoot]

Hey @abmai - I'm having this issue still with v2.0.1 through NPM. Windows 10, using Node.js command prompt as administrator.

https://gist.github.com/tushardhoot/52c1f0d59fb045191f12d9b2f9ae352c

[presmini]

Hi @abmai this fix in 2.0.1 seems to have caused AWS elasticbeanstalk deploy to break. I've confirmed that locking to release 2.0.0 deploys fine, but 2.0.1 I get the following error. Any thoughts?

https://gist.github.com/presmini/b2345abde74a76b80b2b232f4b3ed94d

Thanks!
Paolo

[abmai]

@ibgreen do you have any idea here? these seem to be the same error so it doesn't look to be a windows issue.

[ibgreen]

@ibgreen do you have any idea here? these seem to be the same error so it doesn't look to be a windows issue.

Looking at the commit history between the two releases, this would seem to be the only relevant change:

https://github.com/uber/react-map-gl/commit/1715a7a360df806dd99050b91261a890691d08e6

We now attempt to run flow-remove-types on multiple directories:

• a peer directory (this handles the case when react-map-gl is installed in node_modules as a dependency of another module)
• a sub directory under node_modules (handles the case when developing in the react-map-gl module, but I believe could also happen if the app included multiple mapbox versions).

It would seem that it is the latter step that is causing the issue, since it was added in 2.0.1. I guess that step could be separated into being part of the build scripts since it mainly handles the local development case.

[christianbrueggemann]

I see that this issue is being worked on, so I expect a solution anytime soon. But I'm wondering if there is a workaround that I could use in the meantime? Any ideas if there is a way to get react-map-gl installed on windows?

[ibgreen]

Any ideas if there is a way to get react-map-gl installed on windows?

We unfortunately do not have much access to Windows environments so this is hard for us to reproduce. But it would seem reasonable to assume that the issue is related to the shell scripting syntax in the new flow-remove-type scripts section.

If that is the case, one way to get around this would be to install a unix shell in Windows. I imagine there must be many implementations to choose from. I have personally used cygwin in the past and it worked great for such things, but it is admittedly a huge package and there are likely much smaller packages that would do the job.

Another way we might be able to address this directly in react-map-gl would be to use one of the many npm modules that attempt to provide platform independent shell type functionality for scripts. Just poked around a little, one of the more ambitious seems to be:
https://www.npmjs.com/package/shelljs

[abmai]

Hey all, thanks for following this issue. And apologies for all the problems it's been causing here. The idea here is to run flow-remove-type through the installed mapbox-gl module after npm install. Our bandwidth is limited here so progress has been slow, but we are still working on it.

In the mean time, we're thinking of using shelljs's https://github.com/shelljs/shx to run cross-platform npm scripts. Would welcome PRs here as well if anyone finds a good solution :).

[abmai]

I think we found a fix for this in #192 - can you guys try installing v2.0.2?

[tushardhoot]

v2.0.2 did fix it for me. Thanks @abmai for the quick fix.

[presmini]

I will try this first thing in the morning... thanks!

On Thu, Feb 9, 2017 at 6:05 PM Anh Mai [e-mail] wrote:

I think we found a fix for this in #192
https://github.com/uber/react-map-gl/pull/192 - can you guys try
installing v2.0.2?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/uber/react-map-gl/issues/179#issuecomment-278837160,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAOyqC6Pzw10X4lLwKW4YkxKn6hbSjBmks5ra8X2gaJpZM4LibQY
.

>

>|<

Paolo Resmini / Cloud Services Lead / +1.415.823.3203 MATTERNET

Matternet M2 & Mercedes-Benz mttr.net

[abmai]

Assuming this is fixed now. Please re-open if it isn't.