Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX: found the duplicated prop className #2

Open
abhsrivastava opened this issue Feb 25, 2023 · 0 comments
Open

JSX: found the duplicated prop className #2

abhsrivastava opened this issue Feb 25, 2023 · 0 comments

Comments

@abhsrivastava
Copy link

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

> [email protected] 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>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant