＆＃34;您可能需要一个合适的加载程序来处理此文件类型＆＃34;与bsb反应模板

Question

我有一个文件View.js，其中包含无状态组件：

import Button from 'material-ui/Button';
import React from 'react';

const View = (props) => ( 
  <div>
    <Button variant="raised" >
      {props.name}
    </Button>
  </div>
);

export default View;

然后我写了一个包装器ViewWrapper.re，与reasonml

进行互操作

[@bs.module] external viewJS : ReasonReact.reactClass = "./View";

let make = (~name: string, children) =>
  ReasonReact.wrapJsForReason(
    ~reactClass=viewJS,
    ~props={"name": name },
    children
  );

然后将包装器添加到index.re

中

ReactDOMRe.renderToElementWithId(<Component1 message="Hello!" />, "index1");
ReactDOMRe.renderToElementWithId(<Component2 greeting="Hello!" />, "index2");
ReactDOMRe.renderToElementWithId(<ViewWrapper name="Material" />, "index2");

编译器抱怨：

ERROR in ./src/View.js
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| const View = (props) => (
|   <div>
|     <Button variant="raised" >
|       {props.name}
 @ ./src/ViewWrapper.bs.js 4:11-28
 @ ./src/Index.bs.js

我做错了什么？

更新。 我用

创建了我的理由项目

bsb -init my-react-app -theme react

命令。
我将View.js添加到项目中：

bsconfig.js如下所示：

/* This is the BuckleScript configuration file. Note that this is a comment;
  BuckleScript comes with a JSON parser that supports comments and trailing
  comma. If this screws with your editor highlighting, please tell us by filing
  an issue! */
{
  "name": "react-template",
  "reason": {
    "react-jsx": 2
  },
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": [{
    "module": "commonjs",
    "in-source": true
  }],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": [
    "reason-react"
  ],
  "refmt": 3,
  "warnings": {
    "error": "+5"
  }
}

我错过了什么吗？

Answer 1

问题是使用（JavaScript）JSX。正如格伦所说，你需要使用ES6 / JSX转换设置Babel来输出纯JavaScript。

最简单的方法是将项目设置为正常的ReactJS项目（create-react-app等）并添加bsconfig.json文件（您可以重复使用现有的文件）。将现有的ReactJS项目转换为ReasonReact项目实际上非常简单 - 一旦在bsconfig.json中拥有package.json文件和正确的依赖项，您就可以完成设置。