Creating a React app with React Map GL

In order for the redux theory to be effective, it is necessary to represent state as plain objects that can be serialized, which is not the case with most map libraries. React, on the other hand, is specifically designed for rendering components on the web.


Solution:

Upon investigation, it has been determined that the token is not being correctly passed to your component using the
process.env
. To demonstrate this, I have created a reproducible example that uses a functional token, and it is functioning perfectly. When an invalid token is provided, I am obtaining the same result as you. Therefore, it is likely that you are receiving an undefined token or something similar.

After completing this tutorial, you will possess an
.env
file that contains your token in the following format:
REACT_APP_MAPBOX_TOKEN=MYTOKEN
.

Attempt logging out of your
process.env.REACT_APP_MAPBOX_TOKEN
to observe the results you receive.

However, my suspicion is that you have placed the
.env
file in the src folder, which is incorrect. It should be positioned at the root of your project instead. After doing so, restart your server to ensure that your token is obtained correctly.

Frequently Asked Questions