Js binding error at runtime

1

Hi,

I’m triying a simple js function binding for learning purpose. It compiles but I get a error at runtime :

export declarations may only appear at top level of a module

Here is what I do

In a file named Calculate.js in a folder named Calculate :

export function add(a, b) {
    return a + b;
}

In a file named CalculateBinding.re in a folder named CalculateBing

[@bs.module("../Calculate/Calculate")] external add: (int, int) => int = "add";

In the main file the project:

Js.log(CalculateBinding.add(10, 10))

The project was created with

bsb -init my-react-app -theme react-hooks

What did I do wrong ?

2

Could you check check the JS output of the .re files?

3

CalculateBinding.bs.js

'use strict';

var Calculate = require("../Calculate/Calculate");

function add(prim, prim$1) {
  return Calculate.add(prim, prim$1);
}

exports.add = add;
/* ../Calculate/Calculate Not a pure module */

Index.bs.js

// some requires... 
var CalculateBinding$Repro = require("./CalculateBinding/CalculateBinding.bs.js");
// other requires... 

// some code...
console.log(CalculateBinding$Repro.add(10, 10));
4

Using nodejs export instead of ES6 export works.

I’ve change my Calculate.js file

export function add(a, b) {
     return a + b;
}

to

function add(a, b) {
     return a + b;
}
exports.add = add;

Does it mean that I shouldn’t be using ES6 Modules ?

5

You should make sure that ReScript and the rest of the codebase align on the same module flavor. If your existing codebase uses ES6, set your package-specs settings in your bsconfig.json to es6:

  "package-specs": {
    "module": "es6",
    "in-source": true
  },
3 Likes