with-reasonml example errors when using 6.0.0-canary.6

[tmepple]

This example works fine when using the stable version v5.1 but causes an error when upgrading to the latest canary. It looks like it might be related to the new Babel v7 beta or the babel-plugin-bucklescript that is used but I couldn't isolate/reproduce the problem in the other repo.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The with-reasonml example should work in v6 canary as it did under v5.x

Current Behavior

Steps to Reproduce (for bugs)

1. yarn create next-app --example with-reasonml with-reasonml-app
2. cd with-reasonml-app
3. yarn && yarn dev
4. Navigate to localhost:3000 It works!
5. Bump version of next in package.json to 6.0.0-canary.6 then run yarn and yarn dev again
6. Navigate to localhost:3000 and get the following error:

Context

Was wanting to test the new _app.js functionality to see if it makes using getInitialProps to load Apollo queries easier to use for pages implemented in ReasonML. Currently it's difficult/impossible to bind to the static getInitialProps from Reason pages.

Your Environment

Tech	Version
next	6.0.0-canary.6
node	9.4.0
OS	MacOS 10.13.4
browser	Chrome v65

[tmepple]

Digging deeper I was able to identify an issue in babel-plugin-bucklescript where for some reason filenameRelative is being passed into the plugin as undefined when using Babel v7. I couldn't find the change in Babel causing it as it seems like it should still work but since this is not an issue with NextJS, closing it here.

I will send a PR to babel-plugin-bucklescript so it works with Babel v7.

[Enalmada]

@tmepple Are you still using reasonml with next.js? I have a reasonml page I need to pass the context into to know what the query parameters are in the url of that page. Have you figured out how to use getInitialProps with ReasonML and nextjs reason pages?

(My "plan B" is leaving my _app.js as plain javascript and then passing stuff from that getInitialProps to <Component someParam=manualStuff {...pageProps} /> which can go in as a parameter to make.)

[tmepple]

@Enalmada

I was able to get context in getInitialProps in a pure ReasonML page following the instructions here: #4217 (comment)

Here is an example of accessing the context to detect if we are rendering on the server and passing a boolean into your ReasonReact component. Hope this helps!

let make = (~onServer, _children) => {
/* component code goes here */ 
};

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps => make(~onServer=jsProps##onServer, [||]));

let getInitialProps = context =>
  Js.Promise.make((~resolve, ~reject as _) => {
    let onServer =
      switch (Js.Nullable.toOption(context##req)) {
      | None => false
      | Some(_) => true
      };
    resolve(. {"onServer": onServer});
  });

let inject = [%bs.raw {| (cls, fn) => cls.getInitialProps = fn |}];

inject(default, getInitialProps);

[Enalmada]

Wow...that works! Thank you so much. I will get that into the example since it is likely to be something next reasonml users may eventually need to do and implementation is a bit complex for new users to work out on their own.

Speaking of next with reasonml, would you happen to be able to provide any feedback about this: #5049.

[tmepple]

HI @Enalmada I looked at that other issue and not enough time right now to test the hypothesis but maybe it would work if you define a mutable ref(), feed that to initial state, then mutate it (using :=) in the reducer? Or maybe use a handler instead to mutate the counter variable in Counter.re external to the state? Hope this gives you some things to try.

https://reasonml.github.io/docs/en/mutation
https://reasonml.github.io/reason-react/docs/en/react-ref (note this may be confusing since it is talking about react ref to get a reference to the DOM but it also uses a normal ocaml ref() and shows the use of handlers)
https://reasonml.github.io/reason-react/docs/en/callback-handlers