I'm new to React and working through a tutorial to fetch and render data from the Open Weather API. I've been experimenting with Bootstrap on the UI and when I use Bootstrap, I get an HMR error. This does not happen when I don't use Bootstrap for the Form, text input, and submit button. I did a lot of research and understand it's something to do with HotModuleReplacement and Webpack, but I don't understand much of what I've read or how to apply any offered solutions such as changing a webpack-config. I left out the App.js and Weather.js which are confirmed working with Form.
- Form (w/ Bootstrap) - HMR error
- Form2 (no Bootsrap) - works fine
- Index - using bootstrap.css
Form (not working)
import React from 'react'
export default function Form (props) {
return(
<form onSubmit={props.getWeather}>
<div className="form-group">
<label htmlFor="location">City, Country</label>
<input
type="text"
className="form-control form-control-sm"
id="location"
placeholder="Enter City, Country"
/>
</div>
<div className="form-group">
<label htmlFor="country">Country</label>
<input
type="text"
className="form-control form-control-sm"
placeholder="Enter Country"/>
</div>
<button
type="submit"
className="btn btn-primary btn-sm">
Submit
</button>
</form>
)
}
Form2 - working
import React from 'react'
const Form2 = (props) => {
return (
<form onSubmit={props.getWeather}>
<input
type='text'
placeholder='city'
name='city'
/>
<input
type='text'
placeholder='country'
name='country'
/>
<button>Submit</button>
</form>
)
}
export default Form2;
Index.js - import bootstrap.css
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://somelink
serviceWorker.unregister();