Error: useForm must be used inside of a <Form> component - Electron

Question

What you were expecting: I followed the upgrade guide for linking two components and started using const form = useForm() instead of dispatch. The change works in Chrome browser but when I open in Electron I get the error:

Error: useForm must be used inside of a <Form> component

I'm not sure how to proceed from here and it is strange that it works in chrome but not electron so any help would be greatly appreciated.

import React, { Component, Fragment } from 'react';
import LocationPickerComponent from '../helper/LocationPickerHooks';
import {FormDataConsumer} from 'react-admin';

const FactoryEdit = ({ classes, ...props }) => (
  <Edit  {...props}>
 <TabbedForm>
  <FormDataConsumer>
          {formDataProps => <LocationPicker {...formDataProps} />}
  </FormDataConsumer>
</TabbedForm>
</Edit>
)

And here is the location picker custom components

import React, { Fragment, Form} from 'react';
import { TextInput } from 'react-admin';
import LocationPicker from 'react-location-picker';
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from 'react-places-autocomplete';
import PropTypes from 'prop-types';
import { useForm } from 'react-final-form';

const defaultPosition = {
  lat: 31.218001175963728,
  lng: 121.44911770820613
};

const LocationPickerComponent = ({ formData, classes, ...rest }) => {
  const form = useForm();
const [address, setaddress] = React.useState('');
const [position, setPosition] = React.useState({ 
  lat: formData.Label_Latitude
  ? formData.Label_Latitude
  : defaultPosition.lat,
lng: formData.Label_Longitude
  ? formData.Label_Longitude
  : defaultPosition.lng});

function handleLocationChange ({position, address })  {


form.change('Label_Longitude', position.lng);
form.change('Label_Latitude', position.lat);
form.change('FullAddress', address);

}


function handleChange(address) {
  setaddress(address)
  };



  function handleSelect(address) {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        console.log(latLng)
        setPosition(latLng);
      })
      .catch(error => console.error('Error', error));
  };



return (
  <Fragment>

    <TextInput source="Label_Longitude" {...rest} disabled />
    <TextInput source="Label_Latitude" {...rest} disabled />
    <br />
    <TextInput source="FullAddress" style={{ width: '60%' }} {...rest} />

  <div>
  <div>
    <PlacesAutocomplete
      value={address}
      onChange={handleChange}
      onSelect={handleSelect}
      {...rest} 
    >
      {({
        getInputProps,
        suggestions,
        getSuggestionItemProps,
        loading
      }) => (
        <div>
          <input
            {...getInputProps({
              placeholder: 'Search Places ...',
              className: 'location-search-input'
            })}
          />
          <div className="autocomplete-dropdown-container">
            {loading && <div>Loading...</div>}
            {suggestions.map(suggestion => {
              const className = suggestion.active
                ? 'suggestion-item--active'
                : 'suggestion-item';
              // inline style for demonstration purpose
              const style = suggestion.active
                ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                : { backgroundColor: '#ffffff', cursor: 'pointer' };
              return (
                <div
                  {...getSuggestionItemProps(suggestion, {
                    className,
                    style
                  })}
                >
                  <span>{suggestion.description}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </PlacesAutocomplete>

    <LocationPicker
      containerElement={<div style={{ height: '100%' }} />}
      mapElement={<div style={{ height: '400px' }} />}
      defaultPosition={position}
      onChange={handleLocationChange}
      {...rest} 
    />
  </div>
</div>
</Fragment> 
);};
LocationPickerComponent.defaultProps = {
classes: {},
formData: {}
};
LocationPickerComponent.propTypes = {
classes: PropTypes.shape({
  root: PropTypes.object
}),
formData: PropTypes.shape({
  root: PropTypes.object
})
};

export default LocationPickerComponent;

Environment

• React-admin version: alpha.4
• Last version that did not exhibit the issue (if applicable): v2
• React version: ^16.8
• Browser: Electron "electron": "^6.0.8", "electron-builder": "^21.1.1", "electron-devtools-installer": "^2.2.4", "electron-rebuild": "^1.8.5",
• Stack trace (in case of a JS error):

    in LocationPickerComponent (at FactoryEdit.jsx:105)
    in Component (created by FormDataConsumer)
    in FormDataConsumer (at FactoryEdit.jsx:104)
    in div (created by FormInput)
    in FormInput (created by FormTab)
    in span (created by FormTab)
    in FormTab (created by Context.Consumer)
    in translate(FormTab) (at FactoryEdit.jsx:39)
    in Route (created by Component)
    in div (created by Component)
    in form (created by Component)
    in Component (created by ReactFinalForm)
    in ReactFinalForm (created by TabbedForm)
    in TabbedForm (created by Context.Consumer)
    in withRouter(TabbedForm) (created by FactoryEdit)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by Component)
    in div (created by Component)
    in div (created by Component)
    in Component (created by Edit)
    in Edit (at FactoryEdit.jsx:37)
    in FactoryEdit (created by WithStyles(FactoryEdit))
    in WithStyles(FactoryEdit) (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (at Layout.jsx:10)
    in CustomLayout (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by Context.Consumer)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in TranslationProviderView (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (at App.jsx:866)
    in App (at src/index.jsx:19)

Answer 1

I fixed this by adding react-final-form to my package JSON. For some reason webpack had an issue with it being a peer dependency of ra-core.