JSX: found the duplicated prop `className`

1

Here is my package.json

{
  "name": "team-member-allocation",
  "version": "0.1.0",
  "scripts": {
    "clean": "rescript clean",
    "build": "rescript build",
    "watch": "rescript build -w"
  },
  "keywords": [
    "ReScript"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@rescriptbr/react-bootstrap": "github:rescriptbr/rescript-react-bootstrap",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "rescript": "^10.0.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@rescript/react": "^0.11.0",
    "bootstrap": "^5.1.0",
    "react-bootstrap": "^2.7.2"
  }
}

and this is my bsconfig.json

{
  "name": "team-member-allocation",
  "version": "0.1.0",
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".bs.js",
  "jsx": { "version": 4, "mode": "classic" },
  "bs-dependencies": [
    "@rescript/react",
    "@rescriptbr/react-bootstrap"
  ],
  "reason": {"react-jsx": 3}  
}

When I try to compile my code I get an error in the source code of @rescriptbr/react-bootstrap

> team-member-allocation@0.1.0 build
> rescript build

Dependency on @rescript/react
Dependency on @rescriptbr/react-bootstrap
rescript: [1/10] src/Nav.ast
FAILED: src/Nav.ast

  We've found a bug for you!
  /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/src/Nav.res:17:3-20:18

  15 │   ~onKeyDown: unit => unit=?,
  16 │   ~variant: [#tabs | #pills],
  17 │   ~className: string=?,
  18 │   ~children: React.element,
  19 │   ~bsPrefix: string=?,
  20 │ ) => React.element = "Nav"
  21 │
  22 │ module Item = {

  JSX: found the duplicated prop `className`

rescript: [2/10] src/Button.ast
FAILED: src/Button.ast

  We've found a bug for you!
  /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/src/Button.res:15:3-18:18

  13 │   ~_type: buttonType=?,
  14 │   ~variant: variant=?,
  15 │   ~className: string=?,
  16 │   ~children: React.element,
  17 │   ~bsPrefix: string=?,
  18 │ ) => React.element = "Button"
  19 │

  JSX: found the duplicated prop `className`

rescript: [3/10] src/Accordion.ast
FAILED: src/Accordion.ast

  We've found a bug for you!
  /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/src/Accordion.res:66:5-68:20

  64 │     ~children: React.element,
  65 │     ~className: string=?,
  66 │     ~children: React.element,
  67 │     ~bsPrefix: string,
  68 │   ) => React.element = "Collapse"
  69 │ }
  70 │

  JSX: found the duplicated prop `children`

FAILED: cannot make progress due to previous errors.
Failure: /Users/foo/code/Rescript/team-member-allocation/node_modules/rescript/darwin/ninja.exe
Location: /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/lib/bs

This is my Index.res file which imports rescript react bootstrap

Js.Console.log("came inside the main application")
%%raw("import ('bootstrap/dist/css/bootstrap.min.css')")
switch ReactDOM.querySelector("#main") {
| Some(rootElement) =>
  ReactDOM.Client.Root.render(ReactDOM.Client.createRoot(rootElement), <Demo />)
| None => 
  Js.Console.log("could not find main div")
  ()  
}

and finally this is my code which is using react bootstrap

module Button = ReactBootstrap.Button 
@react.component
let make = () => {
  <div>
    {"Hello World" -> React.string}
    <Button variant="primary">{"Primary"->React.string}</Button>
    <Button variant="secondary">{"Secondary"->React.String}</Button>
    <Button variant="success">{"Success"->React.String}</Button>
    <Button variant="warning">{"Warning"->React.String}</Button>
    <Button variant="danger">{"Danger"->React.String}</Button>
    <Button variant="light">{"Light"->React.String}</Button>
  </div>
}
2

I did lot of googling around and I was able to use React Bootstrap by deleting the dependency on “rescriptbr/rescript-react-bootstrap”. Then I wrote my own bindings like this

module Button = {
  @module("react-bootstrap/Button") @react.component
  external make: (
    ~children: React.element = ?,
    ~variant: string = ?,
    ~id: string = ?,
    ~className: string = ?, 
    ~onClick: 'c = ?
  ) => React.element = "default"
}

and now my code worked.

2 Likes