Following the Getting Started instructions I'm unable to use BootstrapConfig

[nardove]

Describe the bug Following the Getting Started steps, I'm trying to to use the Bootstrap Theme as described. I get the following warning message

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, or you might have mixed up default and named imports.

Check the render method of `_default`.
    at _default (http://localhost:3000/static/js/bundle.js:51162:23)
    at renderButtonGroup
    at div
    at GroupActions (http://localhost:3000/static/js/bundle.js:45422:37)
    at div
    at BasicGroup (http://localhost:3000/static/js/bundle.js:44937:37)
    at http://localhost:3000/static/js/bundle.js:51068:28
    at div
    at Draggable (http://localhost:3000/static/js/bundle.js:42859:41)
    at div
    at GroupContainer (http://localhost:3000/static/js/bundle.js:43060:39)
    at ConnectFunction (http://localhost:3000/static/js/bundle.js:92737:68)
    at Item (http://localhost:3000/static/js/bundle.js:45789:37)
    at Builder (http://localhost:3000/static/js/bundle.js:42118:37)
    at SortableContainer (http://localhost:3000/static/js/bundle.js:43795:39)
    at ConnectFunction (http://localhost:3000/static/js/bundle.js:92737:68)
    at div
    at div
    at Query (http://localhost:3000/static/js/bundle.js:42364:37)
    at ConnectFunction (http://localhost:3000/static/js/bundle.js:92737:68)
    at Provider (http://localhost:3000/static/js/bundle.js:92449:20)
    at BootstrapProvider (http://localhost:3000/static/js/bundle.js:51688:21)
    at renderProvider
    at QueryContainer (http://localhost:3000/static/js/bundle.js:42627:37)
    at div
    at QueryBuilder (http://localhost:3000/static/js/bundle.js:165:74)
    at div
    at App

Using the BasicConfig Theme it works fine

package.json

{
  "name": "query-builder-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^12.0.0",
    "antd": "^4.22.1",
    "bootstrap": "^5.2.0",
    "react": "^17.0.0",
    "react-awesome-query-builder": "^5.1.2",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^17.0.0",
    "react-scripts": "5.0.1",
    "reactstrap": "^9.1.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import QueryBuilderComponent from './QueryBuilderComponent';
import './App.css';

function App() {
  return (
    <div className="App">
      <QueryBuilderComponent />
    </div>
  );
}

export default App;

QueryBuilderComponent.js

import React, { useEffect, useState, useCallback } from 'react';
import { Query, Builder, BasicConfig, Utils as QbUtils } from 'react-awesome-query-builder';

import BootstrapConfig from 'react-awesome-query-builder/lib/config/bootstrap';

import 'react-awesome-query-builder/lib/css/styles.css';

const InitialConfig = BootstrapConfig; // or MaterialConfig or MuiConfig or BootstrapConfig or BasicConfig

const qbConfig = {
  ...InitialConfig,
  fields: {
    qty: {
      label: 'Qty',
      type: 'number',
      fieldSettings: {
        min: 0,
      },
      valueSources: ['value'],
      preferWidgets: ['number'],
    },
    price: {
      label: 'Price',
      type: 'number',
      valueSources: ['value'],
      fieldSettings: {
        min: 10,
        max: 100,
      },
      preferWidgets: ['slider', 'rangeslider'],
    },
    color: {
      label: 'Color',
      type: 'select',
      valueSources: ['value'],
      fieldSettings: {
        listValues: [
          { value: 'yellow', title: 'Yellow' },
          { value: 'green', title: 'Green' },
          { value: 'orange', title: 'Orange' },
        ],
      },
    },
    is_promotion: {
      label: 'Promo?',
      type: 'boolean',
      operators: ['equal'],
      valueSources: ['value'],
    },
  },
};

const queryValue = { id: QbUtils.uuid(), type: 'group' };

const QueryBuilderComponent = () => {
  const [tree, setTree] = useState(QbUtils.checkTree(QbUtils.loadTree(queryValue), qbConfig));
  const [config, setConfig] = useState(qbConfig);

  const renderBuilder = useCallback(
    (props) => (
      <div className="query-builder-container" style={{ padding: '10px' }}>
        <div className="query-builder qb-lite">
          <Builder {...props} />
        </div>
      </div>
    ),
    [],
  );

  const onChange = useCallback((immutableTree, config) => {
    // Tip: for better performance you can apply `throttle` - see `examples/demo`
    setTree(immutableTree);
    setConfig(config);

    const jsonTree = QbUtils.getTree(immutableTree);
    console.log(jsonTree);
    // `jsonTree` can be saved to backend, and later loaded to `queryValue`
  }, []);

  return (
    <div>
      <h1>Query Builder</h1>
      <Query {...config} value={tree} renderBuilder={renderBuilder} onChange={onChange} />
    </div>
  );
};

export default QueryBuilderComponent;

To Reproduce Following Getting Started steps

Expected behavior Render the query builder using Bootstrap theme

Additional context I'm created a new project using create react app and downgrade to React v17

[nardove]

Using the following dependencies, seems to be working fine

  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@popperjs/core": "^2.11.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^12.0.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-awesome-query-builder": "^5.1.2",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "reactstrap": "^9.0.0",
    "web-vitals": "^2.1.0"
  },

[ukrbublik]

Closing issue as resolved. Feel free to reopen if you still have this issue