2

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();
CGermain
  • 369
  • 7
  • 18

0 Answers0