Webpack dev You may need an appropriate loader to handle this file type

Describe the bug I got this error after importing react hook form

backend.js:6 Error in ./~/react-hook-form/dist/react-hook-form.js
Module parse failed: /Users/dimaswibowo/code/ritase-supplier/node_modules/react-hook-form/dist/react-hook-form.js Unexpected token (237:170)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (237:170)
 @ ./src/view/merchant/MerchantForm.js 20:21-47

To Reproduce Steps to reproduce the behavior: first i install react hook form

yarn add react-hook-form

then i import it into my component

import useForm from 'react-hook-form';

when i save i got this error message

Failed to compile.

Error in ./~/react-hook-form/dist/react-hook-form.js
Module parse failed: /Users/dimaswibowo/code/ritase-supplier/node_modules/react-hook-form/dist/react-hook-form.js Unexpected token (23
7:170)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (237:170)
 @ ./src/view/merchant/MerchantForm.js 20:21-47

My MerchantForm.js code

import React, {
  useEffect,
  useState,
} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Modal, Form, Dropdown, Button, Icon, } from 'semantic-ui-react';
import useForm from 'react-hook-form';
import { getBanks, getStates, getCities } from '../../action/public';
import { store } from '../../action/merchant';

const MerchantForm = ({ trigger, getBanks, getStates, getCities, states, banks, cities, loading, merchantTypes, store }) => {
  // const { register, handleSubmit, watch, errors } = useForm();

  useEffect(() => {
    getBanks();
    getStates();
  }, []);

  const [name, setName] = useState('');
  const [ktp, setKtp] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  const [shop, setShop] = useState('');
  const [address, setAddress] = useState('');
  const [stateID, setStateID] = useState('');
  const [cityID, setCityID] = useState('');
  const [bankAccountNumber, setBankAccountNumber] = useState('');
  const [bankAccountName, setBankAccountName] = useState('');
  const [bankID, setBankID] = useState('');
  const [bankBranch, setBankBranch] = useState('');
  const [seller_type, setSellerType] = useState('');

  const handleStatesChange = (e, target) => {
    const { value } = target;
    setCityID('');
    getCities(value);
    setStateID(value);
  };

  const onChange = (setValue) => {
    return (e, target) => {
      setValue(target.value);
    };
  };

  const onSubmit = (data) => {
    console.log('data', data);
  };

  return (
    <Modal trigger={trigger}>
      <Modal.Header>Daftarkan Merchant</Modal.Header>
      <Modal.Content scrolling>
        <Form onSubmit={onSubmit} loading={loading.store}>
          <div className="ui grid">
            <div className="eight wide column">
              {/* <Form.Dropdown selection search fluid label="Tipe Merchant" name="seller_type" options={merchantTypes} onChange={onChange(setSellerType)} ref={register({ required: true })} />
              {errors.nameRequired && <span>This field required</span>} */}
              <Form.Input fluid label="Nama Pemilik" name="name" required onChange={onChange(setName)} type="text" />
              <Form.Input fluid label="No. KTP" name="ktp" required onChange={onChange(setKtp)} type="number" />
              <Form.Input fluid label="No. HP" name="phone" required onChange={onChange(setPhone)} type="text" />
              <Form.Input fluid label="Email" name="email" onChange={onChange(setEmail)} type="email" />
              <Form.Input fluid label="Nama Usaha" name="shop" required onChange={onChange(setShop)} type="text" />
              <Form.TextArea label="Alamat" name="address" required onChange={onChange(setAddress)}></Form.TextArea>
            </div>
            <div className="eight wide column">
              <Form.Dropdown loading={loading.states} required disabled={loading.states} selection search fluid label="Provinsi" name="stateID" options={states} onChange={handleStatesChange} />
              <Form.Dropdown loading={loading.cities} required disabled={cities.length === 0 || loading.cities} selection search fluid label="Kota" name="cityID" options={cities} onChange={onChange(setCityID)} />
              <Form.Dropdown loading={loading.banks} disabled={banks.length === 0 || loading.banks} selection search fluid label="Pilih Bank" name="bankID" options={banks} onChange={onChange(setBankID)} />
              <Form.Input fluid label="No. Rekening" disabled={!bankID} name="shop" onChange={onChange(setBankAccountNumber)} type="text" />
              <Form.Input fluid label="Nama Pemilik Rekening" disabled={!bankID} name="bankAccountName" onChange={onChange(setBankAccountName)} type="text" />
              <Form.Input fluid label="Cabang" name="bankBranch" disabled={!bankID} onChange={onChange(setBankBranch)} type="text" />
            </div>
            <div className="sixteen wide column">
              <Button type="submit" className="right floated" onClick={onSubmit} primary>
                Daftar
              </Button>
            </div>
          </div>
        </Form>
      </Modal.Content>
    </Modal>
  );
};

const mapstp = (state) => {
  const { publicData, merchant } = state;

  const banks = publicData.banks.map(bank => {
    return {
      key: bank.id,
      value: bank.id,
      text: bank.bank_name,
    };
  });

  const states = publicData.states.map(s => {
    return {
      key: s.StateID,
      value: s.StateID,
      text: s.Name,
    };
  });

  const cities = publicData.cities.map(city => {
    return {
      key: city.CityID,
      value: city.CityID,
      text: city.Name,
    };
  });

  const merchantTypes = merchant.types.map(type => {
    return {
      key: type.value,
      value: type.value,
      text: type.text,
    };
  });

  const { loadings } = merchant;

  return {
    banks,
    states,
    cities,
    merchantTypes,
    loading: {
      ...publicData.loading,
      store: loadings.store,
    },
  };
};

const mapdtp = (dispatch) => bindActionCreators({
  getBanks,
  getStates,
  getCities,
  store,
}, dispatch);

export default connect(mapstp, mapdtp)(MerchantForm);

[bluebill1049]

Using react 16.13.1, which don’t have webpack files in root folder of project.

update your react-scirpts it’s pretty old.

[bluebill1049]

I am not sure this is an issue related to this library, but maybe try

import useForm from 'react-hook-form/dist/react-hook-form.ie11'