0

I have this es6 + jsx code than work fine:

// list.js
import React from 'react';
import {
  List,
  Datagrid,
  Filter,
  TextInput,
  NumberField,
  TextField,
} from 'admin-on-rest/lib/mui';

const Filters = props =>
  <Filter {...props}>
    <TextInput source="q" alwaysOn />
  </Filter>
;

export default props => (
  <List {...props} filters={<Filters />} >
    <Datagrid>
      <NumberField source="id" />
      <TextField source="description" />
    </Datagrid>
  </List>
);

I want extract Filters definition in a separate source file.

I tried this way:

// filters.js
import React from 'react';
import {
  Filter,
  TextInput,
  TextField,
} from 'admin-on-rest';

export default props =>
  <Filter {...props}>
    <TextInput source="q" alwaysOn />
  </Filter>
;

and

// list.js
import React from 'react';
import {
  List,
  Datagrid,
  Filter,
  TextInput,
  NumberField,
  TextField,
} from 'admin-on-rest/lib/mui';
import Filters from 'filters';

export default props => (
  <List {...props} filters={<Filters />} >
    <Datagrid>
      <NumberField source="id" />
      <TextField source="description" />
    </Datagrid>
  </List>
);

I thought the code was equivalent, but in the second case I get a couple of

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

and finally this error

Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of StatelessComponent.

The major indicted is

filters={<Filters />}

but what would be the correct syntax?

stefsava
  • 11
  • 3
  • 1
    You always have to provide a relative (or absolute) path to the custom files you want to import. You are potentially importing an npm package with name `filter`. What you want is `import Filters from './filter';` instead. – Felix Kling Mar 08 '17 at 21:37
  • 1
    `filter.js` vs 'filter**s**'? – Bergi Mar 08 '17 at 21:59
  • Sorry, it is only a misspelling on report in this post. In my code filename is filters.js . I fixed the post, the question is still open. – stefsava Mar 09 '17 at 09:02

1 Answers1

1

My self answer:

my stupid mistake, I tried to import some components from the wrong module (admin-on-rest instead of admin-on-rest/lib/mui).

This question would deserve to be entirely removed from StackOverflow, although it could be useful considering the messages raised entirely misleading.

stefsava
  • 11
  • 3