How to include react-map-gl in Gatsby

[arhoy]

I am looking to see how I can include this library in a gatsby app.
I have it working in development but the mapbox is not loading in production, with the issue being No Token Warning.

If anyone has any experience including a mapbox map inside Gatsby I can help me out, it would be greatly appreciated.

I have added the environment variable to Netlify like usual.

My repo where I am using MapBox is : https://github.com/arhoy/fashion-two

I was not able to find any mapbox related plugin in Gatsby currently

[muescha]

This starter is also using map-gl:

#19250

[arhoy]

@michael it also has a no token warning issue on there demo page :)

…

On Mon, Nov 4, 2019 at 11:36 PM Michael ***@***.***> wrote: This starter is also using map-gl: #19250 <#19250> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#19263?email_source=notifications&email_token=ACPMK7P4A3VGHB4PZ4FCORTQSEH6JA5CNFSM4JI4M37KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDBX57Q#issuecomment-549682942>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACPMK7NMQ75BDWGJPJFOYELQSEH6JANCNFSM4JI4M37A> .

[muescha]

ok :(

[LekoArts]

Thank you for opening this!

Please have a look at issues like #6667 or this starter: https://github.com/brendan-ward/gatsby-starter-mapbox
You can also consult our documentation about debugging the build: https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[muescha]

and if you find a solution how you fixed your issue it would be nice to see your solution

[arhoy]

I figured out the issue, The only thing I changed was how i named the env variable inside Netlify.
Must be prefixed with GATSBY which is kinda strange. I don't always do this for all environment variables but maybe I will start to.
ie GATSBY_MAPBOX_API_TOKEN=

[muescha]

Thx. In your code or in netlify settings.

is it described here: https://www.gatsbyjs.org/docs/environment-variables/ ?

Or here: https://www.gatsbyjs.org/docs/deploying-to-netlify/ ?

Or is there something missing so An PR can improve the docs?

[arhoy]

Interesting, Thanks for this.