Incorrect advice for ES6 default value import? about bucklescript.github.io

[chenglou]

Hey! See the message in the doc. Is your project using true es6 or simulated es6 through webpack/babel? The advice only applies to the latter

[martinraison]

Hi, I generated the project with https://github.com/reasonml-community/reason-scripts. That should be simulated es6, right?

[chenglou]

cc @rrdelaney ^ does reason-script/cra detect es6 support and use the real one?

[rrdelaney]

It looks like reason-scripts uses webpack 3, which I think supports native ES Modules. Is the library published as ES6 on npm though? From what I can tell react-spinner uses a UMD setup, so it should be able to be required using either of the above methods.

[Angry-Potato]

@chenglou @rrdelaney I ran into something similar when trying to bind react-native-splash-screen.

In my .js component this is easy:

import SplashScreen from 'react-native-splash-screen';
...
  componentDidMount() {
    SplashScreen.hide();
  }

I tried writing the equivalent in my Reason component (after reading the docs):

[@bs.module "react-native-splash-screen"] 
external hide : unit => unit = "hide";
...
    didMount: _self => hide(),

This transpiles to:

var ReactNativeSplashScreen = require("react-native-splash-screen");
ReactNativeSplashScreen.hide();

Which should work BUT react-native-splash-screen exports default meaning the above hide is actually undefined. If it transpiled to ReactNativeSplashScreen.default.hide() it works fine.

I tried to Reason my way through this with:

type splash = {hide: unit => unit};

[@bs.module "react-native-splash-screen"]
external splashScreen : splash = "default";
...
    didMount: _self => splashScreen.hide(),

but that transpiles to:

var ReactNativeSplashScreen = require("react-native-splash-screen");
...
          /* didMount */(function () {
              return Curry._1(ReactNativeSplashScreen.default[/* hide */0], /* () */0);
            })

which crashes complaining about undefined at 0.

I hassled the people on the Reason discord, they provided me with this solution:

[@bs.module "react-native-splash-screen"] [@bs.scope "default"]
external hide : unit => unit = "hide";
...
hide();

Which totally works!

Maybe this will help you too? I think it should be added to the docs but unsure if the proper place is in the Reason docs or the BuckleScript docs..