Question

设置

我有一个现有的elixir / phoenix Web应用程序

带有vanillajs / React的前端（通过react-phoenix）。

我正在使用早午餐将所有东西捆在一起。

目标

我希望现有的js react组件能够导入和使用原因响应组件。

我相信我现在有充分的理由工作（一个简单的.re hello世界会生成一个.bs.js，可以将其导入到我的js react中）。

但是使用理性反应时会中断。

问题

我复制了简介示例以说明原因-react组件并从教程复制代码以将其与js集成。但是，当我尝试从有效的js文件中导入该文件时，chrome控制台显示：

所以在我看来，生成的.bs.js文件正确调用了reason-react程序包。并且该程序包正确尝试调用bs-platform程序包，但找不到它。

翻阅node_modules，我可以确认bs-platform / lib / js / curry.js确实存在。

文件

Greeting.re

  / *文件：Greeting.re * /

让组件= ReasonReact.statelessComponent（“问候”）;

名称前的/ *下划线表示未使用的变量。为了清楚起见，我们将其命名为* /
让make =（〜name，_children）=> {
  ...零件，
  渲染：（_self）=> 
};

[@ bs.deriving摘要]
输入jsProps = {
  名称：字串，
};

让jsComponent =
  ReasonReact.wrapReasonForJs（〜component，jsProps =>
    使（
      〜name = jsProps-> nameGet，
      [||]，
    ）
  ）;

哪个生成Greeting.bs.js

  //由BUCKLESCRIPT版本4.0.5生成，请使用CARE进行编辑
“使用严格”；

var React = require（“ react”）;
var ReasonReact = require（“ reason-react / src / ReasonReact.js”）;

var component = ReasonReact.statelessComponent（“ Greeting”）;

函数make（name，_）{
  返回/ *记录* / [
          / * 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]，
          / *应该更新* / component [/ *应该更新* / 8]，
          / *渲染* /（function（）{
              返回React.createElement（“ button”，undefined，“ Hello” +（name +“！”）））;
            }），
          / * initialState * / component [/ * initialState * / 10]，
          / *滞留道具* / component [/ *滞留道具* / 11]，
          / *减速器* / component [/ *减速器* / 12]，
          / * jsElementWrapped * / component [/ * jsElementWrapped * / 13]
        ];
}

var jsComponent = ReasonReact.wrapReasonForJs（component，（function（jsProps）{
        返回make（jsProps.name，/ *数组* / []）;
      }））;

exports.component =组件；
Exports.make =制造;
Exports.jsComponent = jsComponent;
/ *组件不是纯模块* /

将其导入：

  const Greeting = require（'./ Greeting.bs.js'）。jsComponent

bsconfig.json

  {
  “ name”：“ my-app”，
  “ reason”：{“ react-jsx”：2}，
  “ bs-dependencies”：[“原因反应”，“ bs-webapi”]，
  “命名空间”：true，
  “ refmt”：3，
  “ suffix”：“ .bs.js”，
  “来源”：[
    {
      “ dir”：“ js”，
      “ subdirs”：是
    }
  ]，
  “ package-specs”：{
    “ module”：“ commonjs”，
    “源内”：true
  }
}

brunch-config.js

  exports.config = {
  文件：{
    javascripts：{
      joinTo：“ js / app.js”
    }，
    样式表：{
      joinTo：“ css / app.css”
    }，
    模板：{
      joinTo：“ js / app.js”
    }
  }，

  惯例：{
    资产：/ ^（静态）/
  }，

  路径：{
    观看过：[“静态”，“ css”，“ js”，“供应商”]，
    公开：“ ../ priv / static”
  }，

  插件：{
    postcss：{
        处理器：[
            require（'autoprefixer'）（[['过去8个版本']），
            require（'csswring'）（）
        ]
    }
  }，

  模块：{
    autoRequire：{
      “ js / app.js”：[“ js / app”]
    }
  }，

  npm：{
    已启用：true
  }
};

编辑：添加了brunch-config.js

原因反应找不到模块bs平台

0 个答案: