How to use JSX in rescript project

I added JSX to rescript example project and it does not compile, am I doing something wrong?

> rescript-project-template@0.0.1 build /home/milan/rescript-project-template
> bsb -make-world

bsb: [3/3] src/Demo.cmj
FAILED: src/Demo.cmj

  We've found a bug for you!
  /home/milan/rescript-project-template/src/Demo.res:2:2-4

  1 │ Js.log("Hello, World!")
  2 │ <div></div>

  The value div can't be found

FAILED: cannot make progress due to previous errors.
npm ERR! code ELIFECYCLE
1 Like

You need to enable JSX in your bsconfig.json file.

See: https://rescript-lang.org/docs/manual/latest/build-configuration#reason-refmt-old

Yes you are right it works that way, but only on if I try it on native linux platform.

My issue must be related to the fact that I am using Ubunu emulator on MS-Windows. I see same behaviour when I ran from powershell . It would be great if MS-Windows was supported since lots of enterprise applications using it.

PS C:\pok\rescript-project-template> npm run build

> rescript-project-template@0.0.1 build C:\pok\rescript-project-template
> bsb -make-world

bsb: [3/3] src/Demo.cmj
FAILED: src/Demo.cmj

  We've found a bug for you!
  C:\pok\rescript-project-template\src\Demo.res:2:2-4

  1 │ Js.log("Hello, World!")
  2 │ <div></div>

  The module or file ReactDOMRe can't be found.
  - If it's a third-party dependency:
    - Did you list it in bsconfig.json?
    - Did you run `bsb` instead of `bsb -make-world`
      (latter builds third-parties)?
  - Did you include the file's directory in bsconfig.json?

FAILED: cannot make progress due to previous errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! rescript-project-template@0.0.1 build: `bsb -make-world`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the rescript-project-template@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MilanBella\AppData\Roaming\npm-cache\_logs\2020-10-31T12_25_13_200Z-debug.log
PS C:\pok\rescript-project-template>

The error message implies that you haven’t installed reason-react.

npm install reason-react --save
# add reason-react in bsconfig.json dependencies
npm run build

should actually fix the compiler error you posted above. Rescript is supported on all major platforms.

Reason-react is using bs-platform@7.1.1, latest bs-platform is 8.2.0 . I’d like to use latest bs-platform. Why then I cannot just use JSX without reason-reatct ?.

It does not work with reason-react either:

PS C:\pok\rescript-project-template> npm run build

> rescript-project-template@0.0.1 build C:\pok\rescript-project-template
> bsb -make-world

ninja: error: 'C:/pok/rescript-project-template/node_modules/reason-react/src/React.re', needed by 'src/React.reast', missing and no known rule to make it
Failure: C:\pok\rescript-project-template\node_modules\bs-platform\win32\ninja.exe
 Location: C:\pok\rescript-project-template\node_modules\reason-react\lib\bs
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! rescript-project-template@0.0.1 build: `bsb -make-world`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the rescript-project-template@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MilanBella\AppData\Roaming\npm-cache\_logs\2020-10-31T16_20_22_734Z-debug.log
PS C:\pok\rescript-project-template>

This is completely fine, you can use reason-react with bs-platform@8.2.0.

I cloned the original rescript-project-template on my machine, and this is how my full configuration looks like:

package.json

{
  "name": "rescript-project-template",
  "version": "0.0.1",
  "scripts": {
    "build": "bsb -make-world",
    "clean": "bsb -clean-world",
    "start": "bsb -make-world -w"
  },
  "keywords": [
    "rescript"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "bs-platform": "8.2.0"
  },
  "dependencies": {
    "reason-react": "^0.9.1"
  }
}

bsconfig.json

{
  "$schema": "https://raw.githubusercontent.com/rescript-lang/rescript-compiler/master/docs/docson/build-schema.json",
  "name": "rescript-project-template",
  "reason": {
    "react-jsx": 3
  },
  "version": "0.0.1",
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": {
    "module": "commonjs",
    "in-source": true
  },
  "suffix": ".bs.js",
  "bs-dependencies": [
    "reason-react"
  ],
  "warnings": {
    "error" : "+101"
  },
}

src/Demo.res

Js.log("Hello, World!")

let a = <div> {React.string("Hello world")} </div>

Running npm i and npm run build makes the whole thing compile for me.

Does your configuration look the same?

JSX desugars into certain function calls (check the JSX docs for more details on the desugaring mechanism). If you want to use JSX in general, you need to make sure to provide e.g. the div function before using the JSX expression. Since JSX is mostly used with React, we usually assume you want to install reason-react.

It works!

I suspect that when I was doing my trials I was never deleting local ./lib folder so some cashed data might caused confusion.

1 Like

yeah that might be! If you want to make sure you are starting off a clean state, just run npm run clean (aka bsb -clean-world) before your next build.

For the record:
I came across this today when doing some testing on windows, maybe we can enable it automatically when jsx detected.

PS: it is good that we use forum, so when I google “the value div can not be found rescript”, it gave me this link, then my problem solved, much better than discord!

11 Likes

I had the same experience today. Nice.

1 Like