TypeError: Cannot read property 'suppressHydrationWarning' of null

, ,
1

Hello everyone! I’m a begginer coming from Elm and trying new thing with ReScript!

I’m doing a university project to our “academic week” and I tried to create bindings for Next.js and ReactBootstrap!

Firstly, there are any package with these bindings?

Secondly, I’m having this error:

TypeError: Cannot read property 'suppressHydrationWarning' of null

I’m new to next.js too, so I don’t know what that means, and the callstack didn’t help to much…

Here is the complete repo → https://github.com/cciuenf/scti
And here link to my bindings → https://github.com/cciuenf/scti/tree/dev/src/bindings

2

Hi @matdsoupe

You might like to take a look at the ReScript NextJS Template which has a good starter for NextJS bindings.

I’m not sure of the cause of your error, but your bindings are a good place to investigate. Check that the JS generated is what you expect.

For example, your Navbar is declared something similar to this:

@module @react.component
external make: (~id: string=?) => React.element = "react-bootstrap/Navbar"

But perhaps you need something like this:

@module("react-bootstrap/Navbar") @react.component
external make: (~id: string=?) => React.element = "default"

Hope that helps.

3

fantastic! i didn’t know about this opitionated template! it’s exactly what i need!

but, focusing in this error, my old bindings were exactly how you did, however i was getting another eror instead, described here https://twitter.com/matdsoupe/status/1427709097294585866

so i changed all bootstrap bindings to match this new form ;/

these changes can be found here: fix: bootstrap bindings · cciuenf/scti@b0462b5 · GitHub

4

Your current import strategy looks like it should work, but has the error. JS code is:

// Import
var Navbar = require("react-bootstrap/Navbar");

// Usage
React.createElement(Navbar, { ..... })

However switching to this seems to work:

// Import
var ReactBootstrap = require("react-bootstrap");

// Usage
React.createElement(ReactBootstrap.Navbar, { ..... })

In ReScript:

@module("react-bootstrap") @react.component
external make: (~id: string=?) => React.element = "Navbar"
1 Like
5

Also, I only want to notice that I discovered the @scope directive! That allows me to do:

@module("react-bootstrap") @scope("Navbar") @react.component
external make: (~id: string=?) => React.element = "Toggle"

That’s generate ES6:

import * as ReactBootstrap from "react-bootstrap";

React.createElement(ReactBootstrap.Navbar.Togggle)
1 Like