The tutorial article of Framer official website does not work!

The bug of using Mapbox model in Framer and its solution.

Like most of Framerjs users, I was amazed by wonderful resources of Framerjs. One of the most important sources of Framer is its official Resources page:

Design everything with code

I started using Mapbox because of the article on the Framer the page above:

Prototyping mobile apps with Mapbox in Framer.js | Mapbox

There is only one problem here: IT DOEST NOT WORK ! at least for now.

The error message:

error message from adding mapbox model in Framer

I decided to get the bottom of it.

After searching around, downloaded another example from Maya Gao:

Power your Framer prototypes with real location data

The example works! I was then suspecting that the Mapbox-gl version has something to do with the error.

Left: example Framer mapbbox-gl model json file| Right: official article project mapbox-gl model json file

Therefore, I uninstalled the mapbox-gl then reinstall the 0.21.0 version:

# In your terminal
cd ~/my-project.framer
npm uninstall mapbox-gl
# after uninstall the mapbo-gl
npm install mapbox-gl@^0.21.0

Reload the project, it works!

I contacted the staff at Mapbox, Maya Gao. It got the official answer is :

“Mapbox GL recently started using FlowType for our source code, so we can enforce types across the codebase. These type annotations are stripped out using the unflowify Browserify transform, and we also have an entry point for webpack users that lets people avoid the transform. Framer is using an older version of iojs doesn’t support many JavaScript features, including Object.assign, which is used by the unflowify transform. Unfortunately we can not fix this problem from our side. From digging around in Thus, Framer fails to be able to bundle Mapbox GL, and surprisingly also attempts to apply the transform when we require the ‘dist’ file inside of Mapbox GL.”

Anyway, I hope Framer and Mapbox can solve the problem together and please do not put an article that does not work at Framer official website!

Special thanks for Maya Gao!