where to put custom .babelrc

Mine always goes in the project root.

Thanks @tykus its working perfectly

I was trying to compile react with the below new syntax but Laravel Mix was unable to do that

class FormInpFld extends Component {
    state = { value: '' };

    handleValueChange = (e) => {
        this.setState({ value: e.target.value });
        this.props.onValueChange();
    }

    render = () => {
        const field = <input className="form-control" type={this.props.fieldtype} 
                            placeholder={this.props.placeholder}
                            onChange={this.handleValueChange} 
                            value={this.state.value} />

        return field;
    }
}

export default FormInpFld;

but after using the custom .babelrc with babel-preset-env and babel-preset-stage-2 it is finally possible

I'm actually new to all these Babel & Webpack stuffs. This problem actually solved by using stage-2 preset but Babel says Stage-X (Experimental Presets) use with extreme caution so is it safe to use?

here is my .babelrc

{
    "plugins": [
        "syntax-dynamic-import",
        "transform-react-jsx-source"
    ],
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "> 1%",
                        "last 2 versions"
                    ]
                }
            }
        ],
        "stage-2",
        "react"
    ]
}

I wouldn't worry about it personally https://babeljs.io/docs/plugins/preset-stage-2/