Quick Links
  • -Overview
  • -Language Features
  • -JS Interop
  • -Build System
Documentation
Language Manual
Reference for all language features
ReScript & React
First class bindings for ReactJS
GenType
Seamless TypeScript integration
Reanalyze
Dead Code & Termination analysis
Exploration
Packages
Explore third party libraries and bindings
Syntax Lookup
Discover all syntax constructs
APIPlaygroundBlogCommunity
  • Playground
  • Blog
  • X
  • Bluesky
  • GitHub
  • Forum
Language Manual
Overview
  • Introduction
  • Installation
  • Editor Plugins
  • Migrate to ReScript Syntax
  • Try
Language Features
  • Overview
  • Let Binding
  • Type
  • Primitive Types
  • Tuple
  • Record
  • Object
  • Variant
  • Null, Undefined and Option
  • Array & List
  • Function
  • If-Else & Loops
  • Pipe
  • Pattern Matching / Destructuring
  • Mutation
  • JSX
  • Exception
  • Lazy Values
  • Promise
  • Module
  • Import & Export
  • Reserved Keyword
JavaScript Interop
  • Embed Raw JavaScript
  • Shared Data Types
  • External (Bind to Any JS Library)
  • Bind to JS Object
  • Bind to JS Function
  • Import from / Export to JS
    • Import From JavaScript
    • Export To JavaScript
  • Bind to Global JS Values
  • JSON
  • Use Illegal Identifier Names
  • Generate Converters & Helpers
  • Browser Support & Polyfills
  • Interop Cheatsheet
Build System
  • Build System Overview
  • Build System Configuration
  • Interop with JS Build Systems
  • Build Performance
Guides
  • Converting from JS
  • Libraries
Extra
  • Newcomer Examples
  • Project Structure
  • FAQ
Docs / Language Manual / Import from / Export to JS
Edit

You are currently looking at the v6.0 - v8.2 docs (Reason v3.6 syntax edition). You can find the latest manual page here.

(These docs are equivalent to the old BuckleScript docs before the ReScript rebrand)

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.

Import From JavaScript

Import a JavaScript Module's Content

Use the bs.module external:

Reason (Old Syntax)ML (Older Syntax)JS Output
// Import nodejs' path.dirname
[@bs.module "path"] external dirname: string => string = "dirname";
let root = dirname("/User/github"); // returns "User"

Here's what the external does:

  • [@bs.module "path"]: pass the name of the JS module as a string; 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.

  • = "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 Itself (CommonJS)

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

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.module] external leftPad: string => int => string = "./leftPad";
let paddedResult = leftPad("hi", 5);

Import a JavaScript Module Itself (ES6 Module Format)

If your JS project is using ES6, you're likely using Babel to compile it to regular JavaScript. Babel's ES6 default export actually exports the default value under the name default. You'd bind to it like this:

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.module "./student"] external studentName: string = "default";
Js.log(studentName);

Export To JavaScript

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

We support 2 JS export formats:

  • CommonJS (usable from JS as require('myFile')).

  • ES6 modules (usable from JS as import * from 'myFile').

The output format is configurable in bsb.

Export an ES6 default value

If your JS project is using 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';

Technically, since a ReScript file maps to a module, there's no such thing as "default" export, only named ones. However, we've made an exception to support default module when you do the following:

Reason (Old Syntax)ML (Older Syntax)JS Output
/* FavoriteStudent.re */
let default = "Bob";

You can then require the default as normal JS side:

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

Note: the above JS snippet only works if you're using that ES6 import/export syntax in JS. If you're still using require, you'd need to do:

JS
let studentName = require('FavoriteStudent').default;
Bind to JS FunctionBind to Global JS Values

© 2024 The ReScript Project

Software and assets distribution powered by KeyCDN.

About
  • Community
  • ReScript Association
Find us on