Import from/Export to JS

You've seen how ReScript's idiomatic Import & Export works. This section describes how we work with importing stuff from JavaScript and exporting stuff for JavaScript consumption.

Note: due to JS ecosystem's module compatibility issues, our advice of keeping your ReScript file's compiled JS output open in a tab applies here more than ever, as you don't want to subtly output the wrong JS module import/export code, on top of having to deal with Babel/Webpack/Jest/Node's CommonJS <-> ES6 compatibility shims.

In short: make sure your bindings below output what you'd have manually written in JS.

Output Format

We support 2 JavaScript import/export formats:

• CommonJS: require('myFile') and module.exports = ....

• ES6 modules: import * from 'MyReScriptFile' and export let ....

The format is configurable in via rescript.json.

Import From JavaScript

Import a JavaScript Module's Named Export

Use the module external:

// Import nodejs' path.dirname
@module("path") external dirname: string => string = "dirname"
let root = dirname("/User/github") // returns "User"

Here's what the external does:

• @module("path"): pass the name of the JS module; in this case, "path". The string can be anything: "./src/myJsFile", "@myNpmNamespace/myLib", etc.

• external: the general keyword for declaring a value that exists on the JS side.

• dirname: the binding name you'll use on the ReScript side.

• string => string: the type signature of dirname. Mandatory for externals.

• = "dirname": the name of the variable inside the path JS module. There's repetition in writing the first and second dirname, because sometime the binding name you want to use on the ReScript side is different than the variable name the JS module exported.

Import a JavaScript Module As a Single Value

By omitting the string argument to module, you bind to the whole JS module:

@module external leftPad: (string, int) => string = "./leftPad"
let paddedResult = leftPad("hi", 5)

Depending on whether you're compiling ReScript to CommonJS or ES6 module, this feature will generate subtly different code. Please check both output tabs to see the difference. The ES6 output here would be wrong!

Import an ES6 Default Export

Use the value "default" on the right hand side:

@module("./student") external studentName: string = "default"
Console.log(studentName)

Use Import Attributes

Since 11.1

Import attributes can be used in ReScript, as long as ReScript is configured to output ES6. You do that by passing configuration to the @module attribute:

@module({from: "./myJson.json", with: {type_: "json", \"some-exotic-identifier": "someValue"}})
external myJson: Js.Json.t = "default"

Console.log(myJson)

This above imports the local ./myJson.json file, adding import attributes.

This is how it works:

1. Instead of passing a string or tuple to @module, pass a record.

2. This record should have a from key. The value of that is where you want the module to be imported from (just like the regular string to @module is).

3. It should also have a with key, with another record where you put all the import attributes you want emitted.

Notice \"some-exotic-identifier" - you'll need to escape any key that's not a valid ReScript record key. Also notice type_. Since type is a reserved keyword in ReScript, you can use type_ instead. It will be output as type in the JavaScript code.

Dynamic Import

Leveraging JavaScript's dynamic import to reduce bundle size and lazy load code as needed is easy in ReScript. It's also a little bit more convenient than in regular JavaScript because you don't need to keep track of file paths manually with ReScript's module system.

Dynamically Importing Parts of a Module

Use the Js.import function to dynamically import a specific part of a module. Put whatever let binding you want to import in there, and you'll get a promise back resolving to that specific binding.

Let's look at an example. Imagine the following file MathUtils.res:

RESCRIPT
let add = (a, b) => a + b
let sub = (a, b) => a - b

Now let's dynamically import the add function in another module, e.g. App.res:

// App.res
let main = async () => {
  let add = await Js.import(MathUtils.add)
  let onePlusOne = add(1, 1)

  Console.log(onePlusOne)
}

Dynamically Importing an Entire Module

The syntax for importing a whole module looks a little different, since we are operating on the module syntax level; instead of using Js.import, you may simply await the module itself:

// App.res
let main = async () => {
  module Utils = await MathUtils

  let twoPlusTwo = Utils.add(2, 2)
  Console.log(twoPlusTwo)
}

Export To JavaScript

Export a Named Value

As mentioned in ReScript's idiomatic Import & Export, every let binding and module is exported by default to other ReScript modules (unless you use a .resi interface file). If you open up the compiled JS file, you'll see that these values can also directly be used by a JavaScript file too.

Export an ES6 Default Value

If your JS project uses ES6 modules, you're likely exporting & importing some default values:

JS
// student.js
export default name = "Al";

JS
// teacher.js
import studentName from 'student.js';

A JavaScript default export is really just syntax sugar for a named export implicitly called default (now you know!). So to export a default value from ReScript, you can just do:

// ReScriptStudent.res
let default = "Bob"

You can then import this default export as usual on the JS side:

JS
// teacher2.js
import studentName from 'ReScriptStudent.js';

If your JavaScript's ES6 default import is transpiled by Babel/Webpack/Jest into CommonJS requires, we've taken care of that too! See the CommonJS output tab for __esModule.