Chill Dev / Grumpy Dev
Adding support for ReasonML to Gatsby
September 29, 2018
So, @ken_wheeler was talking again about ReasonML today at React Boston. I’ve poked around at it before. I’m intrigued. I’m interested. I don’t know where to start.
But hey, I’ve got this Gatsby blog. Gatsby is React. ReasonML has reason-react, right? Can I use them together?
Enter gatsby-plugin-reason
Oh hellllll yeahhhhh. Here we go!
npm i gatsby-plugin-reasonHmmm…
+ gatsby-plugin-reason@1.3.0
added 19 packages from 15 contributors, removed 1756 packages, updated 228 packages and audited 705 packages in 69.105s
found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for detailsWhat the fook? Oh, wait.
scrolls up
wtf is this?
npm timing stage:runTopLevelLifecycles Completed in 340730ms
npm WARN gatsby-plugin-reason@1.3.0 requires a peer of gatsby@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-plugin-react-helmet@2.0.11 requires a peer of gatsby@^1.0.0 but none is installed. You must install peer dependencies yourself.Gatsby 1.0? Nah, fuck. I probably need @next, right?
checks versions on npm
Yep.
engine9:cdgd gabe$ npm i gatsby-plugin-reason@next
...
+ gatsby-plugin-reason@2.0.0-alpha.1
added 14 packages from 4 contributors and audited 26553 packages in 34.345s
found 4 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for detailsAgain with the audit shit… Fuck it.
engine9:cdgd gabe$ npm i --no-optional -g --verbose bs-platform
...
+ bs-platform@4.0.5
added 1 package from 1 contributor in 12.61s
npm verb exit [ 0, true ]
npm timing npm Completed in 12971ms
npm info ok
engine9:cdgd gabe$Ok, done. Let’s just, as a test, edit src/components/layout.js and toss a quick Reason component in the header.
src/layouts/ReasonTest.re:
let component = ReasonReact.statelessComponent("ReasonTest");
let make = children => {
...component,
render: _self => <p> children </p>
};
let default = ReasonReact.wrapReasonForJs(~component, jsProps => make(jsProps##children));And then we’ll edit src/components/layout.js:
import ReasonTest from './ReasonTest';
<ReasonTest>
<b>This is Reason code</b>
</ReasonTest>Hmm..
This relative module was not found:
* ./ReasonTest in ./src/components/layout.jsHuh. Ok. Maybe add in “.re”?
import ReasonTest from './ReasonTest.re'; ERROR Failed to compile with 1 errors 4:24:41 PM
error in ./src/components/ReasonTest.re
Module build failed (from ./node_modules/bs-loader/index.js):
Error: File "bsconfig.json", line 1
Error: package bs-platform is not found
It's the basic, required package. If you have it installed globally,
Please run `npm link bs-platform` to make it availableOh, hm. Ok.
ERROR in ./src/components/ReasonTest.re
Module build failed (from ./node_modules/bs-loader/index.js):
Error: File "bsconfig.json", line 1
Error: package bs-platform is not found
It's the basic, required package. If you have it installed globally,
Please run `npm link bs-platform` to make it availableGah!
engine9:cdgd gabe$ npm link bs-platform
/Users/gabe/Desktop/gatsby-v2/cdgd/node_modules/bs-platform -> /usr/local/lib/node_modules/bs-platform
engine9:cdgd gabe$ Ok now?
Module build failed (from ./node_modules/bs-loader/index.js):
Error: File "bsconfig.json", line 1
Error: package bs-platform is not found
It's the basic, required package. If you have it installed globally,
Please run `npm link bs-platform` to make it availableBut I just DID that!
info bootstrap finished - 4.864 s
ERROR Failed to compile with 1 errors 4:31:26 PM
error in ./src/components/ReasonTest.re
Module build failed (from /usr/local/lib/node_modules/bs-loader/index.js):
Error: ENOENT: no such file or directory, open '/Users/gabe/Desktop/gatsby-v2/cdgd/lib/commonjs/src/components/ReasonTest.bs.js'Ok, then. I guess I’ll just ensure that’s installed globally and link it?
engine9:cdgd gabe$ npm i --no-optional -g --verbose bs-platform
+ bs-platform@4.0.5
added 1 package from 1 contributor in 12.61s
npm verb exit [ 0, true ]
npm timing npm Completed in 12971ms
npm info ok
engine9:cdgd gabe$ npm link bs-platform
/Users/gabe/Desktop/gatsby-v2/cdgd/node_modules/bs-platform -> /usr/local/lib/node_modules/bs-platform
engine9:cdgd gabe$Ok, and…
info bootstrap finished - 4.725 s
ERROR Failed to compile with 1 errors 4:26:35 PM
error in ./src/components/ReasonTest.re
Module build failed (from ./node_modules/bs-loader/index.js):
Error: ENOENT: no such file or directory, open '/Users/gabe/Desktop/gatsby-v2/cdgd/lib/commonjs/src/components/ReasonTest.bs.js'
@ ./src/components/layout.js 15:0-41 102:31-41
@ ./src/templates/blog-post.js
@ ./.cache/sync-requires.js
@ ./.cache/app.js
@ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/appFUCK. Where the hell is this “lib/commonjs” coming from?
googles docs
Found this page with a mention about this config addition:
{
"package-specs": {
"module": "commonjs",
"in-source": true
}
}Ok.
adds in-source in bsconfig.json
info bootstrap finished - 4.915 s
DONE Compiled successfully in 2309ms 4:37:32 PM
You can now view gatsby-starter-blog in the browser.
http://localhost:8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql
Note that the development build is not optimized.
To create a production build, use gatsby build
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.Boom! Works.
EDIT:
And then I tried to deploy.
5:15:59 PM: Error: ./src/components/ReasonTest.re
5:15:59 PM: Module build failed (from ./node_modules/bs-loader/index.js):
5:15:59 PM: Error: sh: 1: bsb: not foundAh, shit. I guess I need to make them dependencies in my package.
engine9:cdgd gabe$ npm i bs-platform bs-loader
+ bs-loader@2.0.6
+ bs-platform@4.0.5
updated 2 packages and audited 26857 packages in 26.465s
found 3 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
engine9:cdgd gabe$ Commit. Push. Works!
