formio / react

JSON powered forms for React.js
https://form.io
MIT License
317 stars 269 forks source link

Cannot start Application (React.createElement: type is invalid -- expected a string ) #136

Closed sah27513 closed 1 year ago

sah27513 commented 6 years ago

I have installed the react-formio library into my React.js app, and I am receiving the following error message:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

Currently I cannot get the FormBuilder to render at all.

Here is the file:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Provider, connect } from 'react-redux';
import HeaderAppBar from './components/Header';
import AppRouter from './routers/AppRouter';
import './styles/styles.css';
import {theme} from './theme/theme';
import configureStore from './store/config/configureStore';
import AppComponent from './app';
import ReactDOM from 'react-dom';
import {FormBuilder} from 'react-formio';

const rootEl = document.getElementById('app');
const store = configureStore();
store.subscribe(()=>{
  console.log(store.getState());
});

const render = Component =>
  ReactDOM.render(
    <Provider store={store}>
      <MuiThemeProvider theme={theme}>
        <Component />
      </MuiThemeProvider>
    </Provider>,
    rootEl
  );

render(<FormBuilder form={{display: 'form'}} onChange={(schema) => console.log(schema)} />);

My package.json:

{
  "name": "react-boiler-plate-code",
  "version": "1.0.0",
  "description": "react-boiler-plate-code",
  "main": "app.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --host 127.0.0.1 --port 4000"
  },
  "author": "jishnu koottala",
  "license": "MIT",
  "dependencies": {
    "@material-ui/core": "^3.1.2",
    "@material-ui/icons": "^1.0.0",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "@types/react-redux": "^6.0.9",
    "@types/react-router-dom": "^4.3.1",
    "@types/redux": "^3.6.0",
    "@types/webpack-env": "^1.13.6",
    "axios": "^0.18.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "fusioncharts": "^3.12.2",
    "material-ui-image": "^3.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-formio": "^3.0.1",
    "react-fusioncharts": "^1.0.5",
    "react-iframe": "^1.3.3",
    "react-jhipster": "^0.5.8",
    "react-loadable": "^5.5.0",
    "react-popper": "^0.10.4",
    "react-redux": "^5.0.7",
    "react-redux-loading-bar": "^4.0.8",
    "react-router-dom": "^4.2.2",
    "react-toastify": "^4.4.0",
    "reactstrap": "^6.4.0",
    "redux": "^4.0.0",
    "redux-devtools": "^3.4.1",
    "redux-devtools-dock-monitor": "^1.1.3",
    "redux-devtools-log-monitor": "^1.4.0",
    "redux-form": "^7.4.2",
    "redux-promise-middleware": "^5.1.1",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.21.0",
    "ts-loader": "^5.2.1",
    "tslib": "^1.9.3",
    "typescript": "^3.1.1",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.3",
    "webpack-env": "^0.8.0"
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "url-loader": "^1.0.1",
    "webpack-cli": "^2.0.15"
  }
}
TanyaGashtold commented 1 year ago

I am closing the issue as it was created too long ago and there are no new comments here. I hope it was resolved. If not, please reopen it. Thanks!