Setup
I have an existing elixir/phoenix web app
with a frontend of vanillajs / React (via react-phoenix).
I'm using brunch to bundle everything.
Goal
I want my existing js react components to be able to import and use reason-react components.
I believe I have plain reason working now (a simple .re hello world generates a .bs.js which can be imported into my js react).
But it breaks when using reason-react.
The Problem
I copied the intro example to make a reason-react component and copied code from the tutorial to integrate it with js. But when I try to import it from a working js file, chrome console shows:
So it looks to me like the generated .bs.js file correctly calls the reason-react package. And that package correctly tries to call the bs-platform package, but cannot find it.
Digging through node_modules, I can confirm that bs-platform/lib/js/curry.js does exist.
Files
Greeting.re
/* file: Greeting.re */
let component = ReasonReact.statelessComponent("Greeting");
/* underscores before names indicate unused variables. We name them for clarity */
let make = (~name, _children) => {
...component,
render: (_self) => <button> {ReasonReact.string("Hello " ++ name ++ "!")} </button>
};
[@bs.deriving abstract]
type jsProps = {
name: string,
};
let jsComponent =
ReasonReact.wrapReasonForJs(~component, jsProps =>
make(
~name=jsProps->nameGet,
[||],
)
);
Which generates Greeting.bs.js
// Generated by BUCKLESCRIPT VERSION 4.0.5, PLEASE EDIT WITH CARE
'use strict';
var React = require("react");
var ReasonReact = require("reason-react/src/ReasonReact.js");
var component = ReasonReact.statelessComponent("Greeting");
function make(name, _) {
return /* record */[
/* debugName */component[/* debugName */0],
/* reactClassInternal */component[/* reactClassInternal */1],
/* handedOffState */component[/* handedOffState */2],
/* willReceiveProps */component[/* willReceiveProps */3],
/* didMount */component[/* didMount */4],
/* didUpdate */component[/* didUpdate */5],
/* willUnmount */component[/* willUnmount */6],
/* willUpdate */component[/* willUpdate */7],
/* shouldUpdate */component[/* shouldUpdate */8],
/* render */(function () {
return React.createElement("button", undefined, "Hello " + (name + "!"));
}),
/* initialState */component[/* initialState */10],
/* retainedProps */component[/* retainedProps */11],
/* reducer */component[/* reducer */12],
/* jsElementWrapped */component[/* jsElementWrapped */13]
];
}
var jsComponent = ReasonReact.wrapReasonForJs(component, (function (jsProps) {
return make(jsProps.name, /* array */[]);
}));
exports.component = component;
exports.make = make;
exports.jsComponent = jsComponent;
/* component Not a pure module */
Importing it with:
const Greeting = require('./Greeting.bs.js').jsComponent
bsconfig.json
{
"name" : "my-app",
"reason" : { "react-jsx" : 2},
"bs-dependencies": ["reason-react", "bs-webapi"],
"namespace": true,
"refmt": 3,
"suffix": ".bs.js",
"sources": [
{
"dir": "js",
"subdirs": true
}
],
"package-specs": {
"module": "commonjs",
"in-source": true
}
}
brunch-config.js
exports.config = {
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
paths: {
watched: ["static", "css", "js", "vendor"],
public: "../priv/static"
},
plugins: {
postcss: {
processors: [
require('autoprefixer')(['last 8 versions']),
require('csswring')()
]
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
};
EDIT: Added brunch-config.js