Bringing ReasonML into an existing react app

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 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> so the output would be <name>Reason.js. This allowed me to add a line to my eslint ignore


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