Monthly Archives: May 2018

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:\Users\source\repos\frontend\src

Hi everyone,

I was looking into asynchronous requests with redux tonight and hit the following error:

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:\Users\source\repos\frontend\src

This is used to provide a promise polyfill for a fetch package mentioned in the tutorial. In order to fix it, just run the following:

npm install babel-polyfill

Thanks to the following post for the solution: https://stackoverflow.com/a/33568284/522859

Module not found: Can’t resolve ‘redux’ in ‘C:\Users\FrontEndSrc\frontend\node_modules\react-redux\es\connect’

Hi everyone,

Another quick one. I’d installed react-redux but was running into the following error:

Failed to compile.

./node_modules/react-redux/es/connect/mapDispatchToProps.js
Module not found: Can’t resolve ‘redux’ in ‘C:\Users\source\repos\FrontEndSrc\frontend\node_modules\react-redux\es\connect’

Fairly easy fix, you need react as well as react-redux:

npm install –save redux

Once that’s done, it should all be working!

Cheers,
Chris

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Hi everyone,

Bit of a silly error I ran into today. This one took an embarrassingly long time to figure out unfortunately:

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

It turned out that the error was a result of not having added the state variable in the constructor. It was then being created onChange and converting the input element into a controlled input.

I was trying to use a checkbox in my form and had copied the input from another view:


 {this.handleChange(event)}} />

HandleChange is as follows:

/* Sets a state value based on the name of the input changed */
handleChange: function (caller, event) {

const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;

caller.setState({ [name]: value });
}

Bit of a silly one, but hopefully it will be able to help out anyone else who runs into it!

Cheers,
Chris