René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"JSX: found the duplicated prop `className`","articleBody":"Here is my package.json\r\n\r\n```\r\n{\r\n  \"name\": \"team-member-allocation\",\r\n  \"version\": \"0.1.0\",\r\n  \"scripts\": {\r\n    \"clean\": \"rescript clean\",\r\n    \"build\": \"rescript build\",\r\n    \"watch\": \"rescript build -w\"\r\n  },\r\n  \"keywords\": [\r\n    \"ReScript\"\r\n  ],\r\n  \"author\": \"\",\r\n  \"license\": \"MIT\",\r\n  \"devDependencies\": {\r\n    \"@rescriptbr/react-bootstrap\": \"github:rescriptbr/rescript-react-bootstrap\",\r\n    \"copy-webpack-plugin\": \"^11.0.0\",\r\n    \"css-loader\": \"^6.7.3\",\r\n    \"html-webpack-plugin\": \"^5.5.0\",\r\n    \"rescript\": \"^10.0.1\",\r\n    \"style-loader\": \"^3.3.1\",\r\n    \"webpack\": \"^5.75.0\",\r\n    \"webpack-cli\": \"^5.0.1\",\r\n    \"webpack-dev-server\": \"^4.11.1\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@rescript/react\": \"^0.11.0\",\r\n    \"bootstrap\": \"^5.1.0\",\r\n    \"react-bootstrap\": \"^2.7.2\"\r\n  }\r\n}\r\n```\r\nand this is my bsconfig.json\r\n\r\n\r\n```\r\n{\r\n  \"name\": \"team-member-allocation\",\r\n  \"version\": \"0.1.0\",\r\n  \"sources\": {\r\n    \"dir\" : \"src\",\r\n    \"subdirs\" : true\r\n  },\r\n  \"package-specs\": {\r\n    \"module\": \"es6\",\r\n    \"in-source\": true\r\n  },\r\n  \"suffix\": \".bs.js\",\r\n  \"jsx\": { \"version\": 4, \"mode\": \"classic\" },\r\n  \"bs-dependencies\": [\r\n    \"@rescript/react\",\r\n    \"@rescriptbr/react-bootstrap\"\r\n  ],\r\n  \"reason\": {\"react-jsx\": 3}  \r\n}\r\n```\r\n\r\nWhen I try to compile my code I get an error in the source code of `@rescriptbr/react-bootstrap`\r\n\r\n\r\n```\r\n\u003e team-member-allocation@0.1.0 build\r\n\u003e rescript build\r\n\r\nDependency on @rescript/react\r\nDependency on @rescriptbr/react-bootstrap\r\nrescript: [1/10] src/Nav.ast\r\nFAILED: src/Nav.ast\r\n\r\n  We've found a bug for you!\r\n  /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/src/Nav.res:17:3-20:18\r\n\r\n  15 │   ~onKeyDown: unit =\u003e unit=?,\r\n  16 │   ~variant: [#tabs | #pills],\r\n  17 │   ~className: string=?,\r\n  18 │   ~children: React.element,\r\n  19 │   ~bsPrefix: string=?,\r\n  20 │ ) =\u003e React.element = \"Nav\"\r\n  21 │\r\n  22 │ module Item = {\r\n\r\n  JSX: found the duplicated prop `className`\r\n\r\nrescript: [2/10] src/Button.ast\r\nFAILED: src/Button.ast\r\n\r\n  We've found a bug for you!\r\n  /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/src/Button.res:15:3-18:18\r\n\r\n  13 │   ~_type: buttonType=?,\r\n  14 │   ~variant: variant=?,\r\n  15 │   ~className: string=?,\r\n  16 │   ~children: React.element,\r\n  17 │   ~bsPrefix: string=?,\r\n  18 │ ) =\u003e React.element = \"Button\"\r\n  19 │\r\n\r\n  JSX: found the duplicated prop `className`\r\n\r\nrescript: [3/10] src/Accordion.ast\r\nFAILED: src/Accordion.ast\r\n\r\n  We've found a bug for you!\r\n  /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/src/Accordion.res:66:5-68:20\r\n\r\n  64 │     ~children: React.element,\r\n  65 │     ~className: string=?,\r\n  66 │     ~children: React.element,\r\n  67 │     ~bsPrefix: string,\r\n  68 │   ) =\u003e React.element = \"Collapse\"\r\n  69 │ }\r\n  70 │\r\n\r\n  JSX: found the duplicated prop `children`\r\n\r\nFAILED: cannot make progress due to previous errors.\r\nFailure: /Users/foo/code/Rescript/team-member-allocation/node_modules/rescript/darwin/ninja.exe\r\nLocation: /Users/foo/code/Rescript/team-member-allocation/node_modules/@rescriptbr/react-bootstrap/lib/bs\r\n```\r\n\r\nThis is my Index.res file which imports rescript react bootstrap\r\n\r\n\r\n```\r\nJs.Console.log(\"came inside the main application\")\r\n%%raw(\"import ('bootstrap/dist/css/bootstrap.min.css')\")\r\nswitch ReactDOM.querySelector(\"#main\") {\r\n| Some(rootElement) =\u003e\r\n  ReactDOM.Client.Root.render(ReactDOM.Client.createRoot(rootElement), \u003cDemo /\u003e)\r\n| None =\u003e \r\n  Js.Console.log(\"could not find main div\")\r\n  ()  \r\n}\r\n```\r\n\r\nand finally this is my code which is using react bootstrap\r\n\r\n\r\n```\r\nmodule Button = ReactBootstrap.Button \r\n@react.component\r\nlet make = () =\u003e {\r\n  \u003cdiv\u003e\r\n    {\"Hello World\" -\u003e React.string}\r\n    \u003cButton variant=\"primary\"\u003e{\"Primary\"-\u003eReact.string}\u003c/Button\u003e\r\n    \u003cButton variant=\"secondary\"\u003e{\"Secondary\"-\u003eReact.String}\u003c/Button\u003e\r\n    \u003cButton variant=\"success\"\u003e{\"Success\"-\u003eReact.String}\u003c/Button\u003e\r\n    \u003cButton variant=\"warning\"\u003e{\"Warning\"-\u003eReact.String}\u003c/Button\u003e\r\n    \u003cButton variant=\"danger\"\u003e{\"Danger\"-\u003eReact.String}\u003c/Button\u003e\r\n    \u003cButton variant=\"light\"\u003e{\"Light\"-\u003eReact.String}\u003c/Button\u003e\r\n  \u003c/div\u003e\r\n}\r\n```","author":{"url":"https://github.com/abhsrivastava","@type":"Person","name":"abhsrivastava"},"datePublished":"2023-02-25T16:18:16.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/2/rescript-react-bootstrap/issues/2"}