Bringing ReasonML into an existing react app

Alan Hietala
Oct 2, 2017 · 2 min read

I’ve brought reasonML into my side-project Shadowrun Creator and here are the steps I took to get everything working. I based most of my work off of the guide found at https://github.com/eanplatter/introduce-reason-example and it worked well for the most part.

First let’s install the modules we’ll need into our existing React app. Mine was bootstrapped with create-react-app and I had ejected right away. If you want to start with a pure ReasonML application start with reason-scripts which makes things dead simple.

If you’ve made it this far you’re interested in bringing some Reason into an existing react application.

yarn add reason-react reason-js
yarn add -D bs-platform

you’ll also need to add a bucklescript config called bsconfig.json to the root of your project.

{
"name" : "shadowrun-creator-react",
"reason" : { "react-jsx" : 2},
"bs-dependencies": ["reason-react", "reason-js"],
"sources": [
{
"dir": "src",
"subdirs": true,
}
],
"package-specs": {
"module": "commonjs",
"in-source": true,
}
}

Some things to note is that I wanted to have my reason files outputted to my source directory along side the existing javascript files. This is what the “in-source: true” line accomplishes. Also it tells bucklescript that we want to export commonjs modules.

One problem that I ran into was that eslint didn’t like the compiled bucklescript files.

Module build failed: TypeError: Cannot read property ‘node’ of undefined

I decided to use a convention of naming my reason files with <name>Reason.re so the output would be <name>Reason.js. This allowed me to add a line to my eslint ignore

**/*Reason.js

The last step was to add some additional scripts to the package.json

"buckle:up": "bsb -make-world -w",
"buckle:build": "bsb -make-world",
"buckle:clean": "bsb -clean-world",

I use circleci for my CI/CD so the only thing left was to add a line to run the buckle:build script before my usual build script.

More to come as I dive deeper into the world of ReasonML

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store