I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are working as expected in my app. While buttons function correctly, forms do not work properly. Here is the structure of my project:
my-project/
|── node_modules
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
│ └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
This is my main.js file:
// Import our custom CSS
import "../scss/styles.scss";
// Import all Bootstrap JS
import * as bootstrap from "bootstrap";
This is styles.scss file:
// Import all Bootstrap CSS
@import "~bootstrap/scss/bootstrap";
This is index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Vite</title>
</head>
<body>
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
<script type="module" src="./js/main.js"></script>
</body>
</html>
Finally, this is vite.config.js file:
const path = require("path");
export default {
root: path.resolve(__dirname, "src"),
resolve: {
alias: {
"~bootstrap": path.resolve(__dirname, "./node_modules/bootstrap"),
},
},
server: {
port: 8080,
hot: true,
},
};
This is my package.json :
{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.61.0",
"vite": "^4.2.1"
},
"dependencies": {
"@popperjs/core": "^2.11.7",
"bootstrap": "^5.2.3"
}
}
The output in the index.html should look like this: https://i.sstatic.net/QMZZ6.png However, in my project, it looks like this: https://i.sstatic.net/zaifL.png
Edit I downgraded my bootstrap version to 4.1.3 but the forms still do not work as expected. Here is the result: https://i.sstatic.net/P0rjp.png Here is the expected result: https://i.sstatic.net/XZIND.png Here is the updated package.json file:
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@popperjs/core": "^2.11.7",
"bootstrap": "^4.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"sass": "^1.61.0",
"vite": "^4.2.0"
}
}