MaterialConfig throws error: Check the render method of `_default`.

[oduncan]

Describe the bug Getting an odd error simply setting up the basic example with MaterialConfig. BasicConfig works fine.

Relevant packages:

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
"@material-ui/pickers": "^3.3.10",
"react": "^17.0.2",
"react-awesome-query-builder": "^4.8.0",
"material-ui-confirm": "^2.1.3",

To Reproduce

1. Set up a component like the simple example with MaterialConfig
2. click of add rule or add group
3. Throws runtime error

Expected behavior On click of add rule or add group should render the group/rule.

Additional context react_devtools_backend.js:2540 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of _default. at _default (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder/lib/config/material.js:1955:33) at _default (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder/lib/config/material.js:2297:89) at Field (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:4020:37) at div at Col (https://juliett.localhost:8080/_snowpack/pkg/common/basic-2d1d3cc0.js:8228:23) at FieldWrapper (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:4230:37) at div at div at Rule (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:4434:37) at https://juliett.localhost:8080/_snowpack/pkg/common/basic-2d1d3cc0.js:8258:28 at div at Draggable (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:3596:41) at div at RuleContainer (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:3353:39) at ConnectFunction (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:1696:28) at Item (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:6564:37) at div at BasicGroup (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:5342:37) at https://juliett.localhost:8080/_snowpack/pkg/common/basic-2d1d3cc0.js:8258:28 at div at Draggable (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:3596:41) at div at GroupContainer (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:4902:39) at ConnectFunction (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:1696:28) at Item (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:6564:37) at div at BasicGroup (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:5342:37) at https://juliett.localhost:8080/_snowpack/pkg/common/basic-2d1d3cc0.js:8258:28 at div at Draggable (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:3596:41) at div at GroupContainer (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:4902:39) at ConnectFunction (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:1696:28) at Item (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:6564:37) at Builder (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:7322:37) at SortableContainer (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:6672:39) at ConnectFunction (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:1696:28) at div at div at Query (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:3041:37) at ConnectFunction (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:1696:28) at Provider (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:1494:20) at div at ConfirmProvider (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder/lib/config/material.js:266:23) at MuiPickersUtilsProvider (https://juliett.localhost:8080/_snowpack/pkg/common/index-ae200baa.js:471:20) at MaterialProvider (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder/lib/config/material.js:2843:21) at renderProvider at QueryContainer (https://juliett.localhost:8080/_snowpack/pkg/react-awesome-query-builder.js:3201:37) at div at QueryInput (https://juliett.localhost:8080/dist/pages/Incidents/Form.js:179:3) at div at Wrapper (https://juliett.localhost:8080/dist/pages/Incidents/Form.js:289:33) at InnerLoadable (https://juliett.localhost:8080/_snowpack/pkg/@loadable/component.js:152:34) at LoadableWithChunkExtractor at Loadable at Route (https://juliett.localhost:8080/_snowpack/pkg/react-router-dom.js:2052:29) at Switch (https://juliett.localhost:8080/_snowpack/pkg/react-router-dom.js:2258:29) at IncidentRoutes at InnerLoadable (https://juliett.localhost:8080/_snowpack/pkg/@loadable/component.js:152:34) at LoadableWithChunkExtractor at Loadable at Route (https://juliett.localhost:8080/_snowpack/pkg/react-router-dom.js:2052:29) at Switch (https://juliett.localhost:8080/_snowpack/pkg/react-router-dom.js:2258:29) at Routes (https://juliett.localhost:8080/dist/Routes.js:67:19) at ErrorBoundary (https://juliett.localhost:8080/dist/components/ErrorBoundary.js:41:5) at WithStyles (https://juliett.localhost:8080/_snowpack/pkg/common/withStyles-381e9b74.js:5781:13)

[ukrbublik]

Can you please post the full package.json or preferably sample app to reproduce your issue? I remember I had similar issue once, but it was related to incorrect app configuration.

[ujjwal1801]

Hi. Faced a similar issue with BootstrapConfig as well. But as soon as I switched to BasicConfig, it started working. My guess is since my project already had Bootstrap installed, it clashed with the library.

[ukrbublik]

Similar to #718

[ukrbublik]

Version 6.0.0 has been released. See migration guide Now there are separate packages for Material, Bootstrap and basic