reason-react cannot find module bs-platform

511 Views Asked by At

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:

console error

ReasonReact

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

0

There are 0 best solutions below