React-admin: ReferenceField: call: argument fn is undefined or null (3.0.0-alpha.2)

[js-chris]

I updated to 3.0.0-alpha.2 and get a Notification Error know, when using a ReferenceField:

Code is the example code:

import React from 'react';
import { List, Datagrid, TextField, ReferenceField } from 'react-admin';

export const PostList = (props) => {
    return (
        <List {...props}>
            <Datagrid rowClick="edit">
                <ReferenceField source="userId" reference="users" basePath="/users">
                    <TextField source="username" />
                </ReferenceField>
                <TextField source="id" />
                <TextField source="title" />
                <TextField source="body" />
            </Datagrid>
        </List>
    );
};

The error is popping up in a Notification and says "call: argument fn is undefined or null". Also the user relation is not loaded. If I click on "users", load them and go back to posts, the users are displayed now, but the error stays.

I get also a Warning in the console, if I do not add the basePath to the ReferenceField, which says: "Warning: Failed prop type: The prop basePath is marked as required in ReferenceField, but its value is undefined.". As far as i know, this was not needed till now.

Thanks
Chris

[js-chris]

Update:

The error was caused by using an own createAdminStore and from the CustomApp Tutorial (https://github.com/marmelab/react-admin/blob/next/docs/CustomApp.md).

I removed that and moved my own reducers to

Best
Chris

[fzaninotto]

How does your createAdminStore differs from react-admin's? Can you show us some code?

[js-chris]

Thanks for your answer. Of course, here is my createAdminStore:

import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import { all, fork } from 'redux-saga/effects';
import { createLogger } from 'redux-logger';
import { appdataByPHPOS, appstateByPHPOS, options } from '../../common/store/reducers/reducers';
import thunk from 'redux-thunk';

import {
    adminReducer,
    adminSaga,
    defaultI18nProvider,
    i18nReducer,
    USER_LOGOUT,
} from 'react-admin';

export default ({
    authProvider,
    dataProvider,
    i18nProvider = defaultI18nProvider,
    history,
    locale = 'en',
}) => {

    const reducer = combineReducers({
        admin: adminReducer,
        i18n: i18nReducer(locale, i18nProvider(locale)),
        router: connectRouter(history),
        // { /* add your own reducers here */ },
        // bitcoinRate: bitcoinRateReducer,
        appdataByPHPOS,
        appstateByPHPOS,
        options
    });

    const resettableAppReducer = (state, action) =>
        reducer(action.type !== USER_LOGOUT ? state : undefined, action);

    const saga = function* rootSaga() {
        yield all(
            [
                adminSaga(dataProvider, authProvider, i18nProvider),
                // add your own sagas here
            ].map(fork)
        );
    };

    const sagaMiddleware = createSagaMiddleware();

    let log = false;

    let middlewares = [
        sagaMiddleware,
        routerMiddleware(history),
        thunk
        // api
    ];

    if(log) {
        middlewares.push(createLogger());
    }

    const store = createStore(
        resettableAppReducer,
        { /* set your initial state here */ },
        compose(
            applyMiddleware(
                ...middlewares
                // add your own middlewares here
            ),
            typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
            ? window.__REDUX_DEVTOOLS_EXTENSION__()
            : f => f
            // add your own enhancers here
        )
    );

    sagaMiddleware.run(saga);
    return store;
};

I coud not find, why I get this error, till now. I don't think it is redux-thunk, because api-platform is alos using it and I did't get the error there. Of course I testet also without my reducers.

Maybe you see something at first glance.

Thanks
Chris

[js-chris]

Well, after changing quite a lot of things and testing my createAdminStore again, it is working now, without errors.

Sorry, I am closing this issue now.

[alexandre-abrioux]

I was getting the same error on 3.0.1 and the solution for me was to update my dataProvider from the old 2.x function form to the new 3.x object form.

Just return an object in your dataProvider instead of a function. I used the following adapter:

import {
  GET_LIST,
  GET_ONE,
  GET_MANY,
  GET_MANY_REFERENCE,
  UPDATE,
  UPDATE_MANY,
  CREATE,
  DELETE,
  DELETE_MANY,
} from 'react-admin';
return {
  getList: (resource, params) => handle(GET_LIST, resource, params),
  getOne: (resource, params) => handle(GET_ONE, resource, params),
  getMany: (resource, params) => handle(GET_MANY, resource, params),
  getManyReference: (resource, params) => handle(GET_MANY_REFERENCE, resource, params),
  update: (resource, params) => handle(UPDATE, resource, params),
  updateMany: (resource, params) => handle(UPDATE_MANY, resource, params),
  create: (resource, params) => handle(CREATE, resource, params),
  delete: (resource, params) => handle(DELETE, resource, params),
  deleteMany: (resource, params) => handle(DELETE_MANY, resource, params),
};

; where handle is the old dataProvider function.

I tried to reproduce on the sandbox but I found no issue when converting the dataProvider back to the 2.x function form. This is probably due to the way my dataProvider differs from the sandbox one. It is a modified version of ra-data-json-hal.

[atomicacorn]

Well, after changing quite a lot of things and testing my createAdminStore again, it is working now, without errors.

Sorry, I am closing this issue now.

@js-chris Would you mind sharing your updated custom admin store? I am currently wrestling with this exact same issue.

[vctqs1]

Humm, I also got the same error. How do you guys can fix this?

I got an error when custom createAdminStore and using ReferenceInput

[fzaninotto]

@vctqs1 This is an old issue about an old version. Please open a new issue, with details about how to reproduce it and about your configuration - just follow the issue template.

[vctqs1]

@fabiomaia I created, please take a look. thank u