1

Building a component with Reason and React always gives me an module import statement for "react", which cannot be found if React is included from a CDN. Is there a solution for this? I've tried to define window.react = React in index.html without success. es6-global setting does not change anything.

I'm not using a bundling program like webpack.

Edit: Possibly relevant thread from Reason forum: https://reasonml.chat/t/can-one-load-reasonml-es6-modules-without-a-bundler/2219

Similar issue (not resolved): can one load reasonml es6 modules without a bundler

importmap (not yet implemented in browsers) could be another solution for this: Using ES6 Modules without a Transpiler/Bundler step

glennsl
  • 28,186
  • 12
  • 57
  • 75
Olle Härstedt
  • 3,799
  • 1
  • 24
  • 57

1 Answers1

3

Technically, yes you can, but it's not going to be as easy as going with the npm flow and using a bundler.

The ReasonReact bindings are written in a way that produces output JavaScript that imports modules like:

import * as React from "react";

(If using ES6 module style.)

If using a CDN you would probably want an output that looks like this:

import * as React from "https://some.cdn/react";

The syntax (from the ReasonReact repo) that controls the output JS is:

[@bs.module "react"]
external createElement: (component('props), 'props) => element = "createElement";

If you changed it to:

[@bs.module "https://some.cdn/react"]
external createElement: (component('props), 'props) => element = "createElement";

...then you'd get the desired output. But the problem is then you need to change the sources ... i.e. maintain or find forked bindings for React for that CDN. Or set up some code automation that does a find-and-replace of [@bs.module "react"] with [@bs.module "https://some.cnd/react"]. So either way, it's not as simple as using a bundler.

Yawar
  • 11,272
  • 4
  • 48
  • 80
  • Thank you! Do you have a link to a page on which bundler works good in ReactReason? I'd prefer to _not_ use an npm server to serve the pages, since I want to integrate it in another older web app. – Olle Härstedt Nov 07 '20 at 19:29
  • @OlleHärstedt not sure what you mean by 'npm server', but Webpack and Parcel work fine as bundlers. The latter is zero config. – Yawar Nov 07 '20 at 20:36