search

vazco / uniforms

A React library for building forms from any schema.
https://uniforms.tools
MIT License
1.96k stars 244 forks source link

Unrecognised schema #504

Closed rrreche closed 5 years ago

rrreche commented 5 years ago

Hi there! I am having troubles integrating a simple example into my app.

The trace:

modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:29004 Uncaught Error: Unrecognised schema: [object Object]
    at invariant (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:29004)
    at createSchemaBridge (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:169941)
    at _class.BaseForm (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:169552)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168705)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171649)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168764)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171805)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168925)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171477)
    at new _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168628)
invariant @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:29004
createSchemaBridge @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:169941
Form @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:169552
UnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168705
QuickUnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171649
QuickUnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168764
ValidatedQuickUnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171805
ValidatedQuickUnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168925
AutoValidatedQuickUnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171477
AutoValidatedQuickUnstyledForm @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168628
constructClassInstance @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:16888
updateClassComponent @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:18740
beginWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:19595
performUnitOfWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:22410
workLoop @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:22450
callCallback @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:4409
invokeGuardedCallbackDev @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:4459
invokeGuardedCallback @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:4516
replayUnitOfWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:21697
renderRoot @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:22569
performWorkOnRoot @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23425
performWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23337
performSyncWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23311
requestWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23180
scheduleWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:22989
scheduleRootUpdate @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23657
updateContainerAtExpirationTime @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23685
updateContainer @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23742
ReactRoot.render @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24034
(anonymous) @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24174
unbatchedUpdates @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23540
legacyRenderSubtreeIntoContainer @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24170
render @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24231
Meteor.startup @ client.js:9
maybeReady @ meteor.js?hash=33066830ab46d87e2b249d2780805545e40ce9ba:927
loadingCompleted @ meteor.js?hash=33066830ab46d87e2b249d2780805545e40ce9ba:939
modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:20273 The above error occurred in the <AutoValidatedQuickUnstyledForm> component:
    in AutoValidatedQuickUnstyledForm (created by SimpleForm)
    in SimpleForm (created by Deploy)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (created by GridItem)
    in GridItem (created by WithStyles(GridItem))
    in WithStyles(GridItem) (created by Deploy)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (created by GridContainer)
    in GridContainer (created by WithStyles(GridContainer))
    in WithStyles(GridContainer) (created by Deploy)
    in Deploy (created by WithStyles(Deploy))
    in WithStyles(Deploy) (created by Route)
    in Route
    in Switch
    in div (created by App)
    in div (created by App)
    in ErrorBoundary (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by WithStyles(App))
    in WithStyles(App) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by App)
    in MuiThemeProviderOld (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:20273
logError @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:20309
callback @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:21239
callCallback @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:15572
commitUpdateEffects @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:15611
commitUpdateQueue @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:15602
commitLifeCycles @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:20517
commitAllLifeCycles @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:21852
callCallback @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:4409
invokeGuardedCallbackDev @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:4459
invokeGuardedCallback @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:4516
commitRoot @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:22048
completeRoot @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23500
performWorkOnRoot @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23429
performWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23337
performSyncWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23311
requestWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23180
scheduleWork @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:22989
scheduleRootUpdate @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23657
updateContainerAtExpirationTime @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23685
updateContainer @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23742
ReactRoot.render @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24034
(anonymous) @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24174
unbatchedUpdates @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:23540
legacyRenderSubtreeIntoContainer @ modules.js?hash=30b8020a405ca8141f3ffc32bd
f7996aad361e35:24170
render @ modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:24231
Meteor.startup @ client.js:9
maybeReady @ meteor.js?hash=33066830ab46d87e2b249d2780805545e40ce9ba:927
loadingCompleted @ meteor.js?hash=33066830ab46d87e2b249d2780805545e40ce9ba:939
errorboundary.js:14 Error: Unrecognised schema: [object Object]
    at invariant (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:29004)
    at createSchemaBridge (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:169941)
    at _class.BaseForm (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:169552)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168705)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171649)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168764)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171805)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168925)
    at _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:171477)
    at new _class (modules.js?hash=30b8020a405ca8141f3ffc32bdf7996aad361e35:168628) {componentStack: "↵    in AutoValidatedQuickUnstyledForm (created by…n MuiThemeProviderOld (created by App)↵    in App"}

Component:

import React from 'react';
// import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import GridItem from '/imports/ui/components/Grid/GridItem.jsx';
import GridContainer from '/imports/ui/components/Grid/GridContainer.jsx';

import MediaCard from '/imports/ui/parts/MediaCard';
import ItemList from '/imports/ui/parts/ItemList';

////////////
//Uniforms//
////////////
import SimpleForm from '/imports/ui/parts/Uniforms/SimpleForm';

import DeploySchema from '/imports/api/UniformSchemas/DeploySchema/schema.js';

/////////
//Web3//
////////
import web3 from '/imports/modules/web3wrapper';

import dashboardStyle from '/assets/jss/material-dashboard-react/views/dashboardStyle.jsx';

class Deploy extends React.Component {

  onSubmit = data => {
        // You can do anything with this data,
        // send it to the server using Meteor.call, invoke GraphQL mutation or just display in a modal :)
        console.log(data);
    };

  render(){

    /*web3.eth.getAccounts()
      .then(console.log);*/

      console.log(SimpleForm);
      console.log(DeploySchema);

    return(
      <GridContainer>
        <GridItem xs={12} sm={12}>
          <SimpleForm
              schema={DeploySchema}
              onSubmit={this.onSubmit}
          />
        </GridItem>
      </GridContainer>
    );
  }
}

// Dashboard.propTypes = {
//   classes: PropTypes.object.isRequired,
// };

export default withStyles(dashboardStyle)(Deploy);

The schema:

/* eslint-disable consistent-return */

import SimpleSchema from 'simpl-schema';
import { check } from 'meteor/check';

export const DeploySchema = new SimpleSchema({
    _accountAddress: String,
    _gas: Number,
}, {check});

The form:

import React from 'react';
import {AutoForm} from 'uniforms-unstyled';

const SimpleForm = ({schema, onSubmit, model = {}}) => (
    <AutoForm
        schema={schema}
        onSubmit={onSubmit}
        model={model}
    />
);

export default SimpleForm;

Since it is so simple, I think there might some kind of bug here, but I am struggling to find a workaround. My package.json:


{
  "name": "lottery-react",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.5",
    "@material-ui/core": "^3.8.1",
    "@material-ui/icons": "^3.0.2",
    "lodash": "^4.17.11",
    "meteor-node-stubs": "^0.4.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-gravatar": "^2.6.3",
    "react-notifications": "^1.4.3",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "simpl-schema": "^1.5.3",
    "uniforms": "^1.30.0",
    "uniforms-material": "^1.30.0",
    "uniforms-unstyled": "^1.30.0",
    "web3": "^1.0.0-beta.37",
    "webpack": "^4.28.3"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}
radekmie commented 5 years ago

Hi @rrreche. This looks rather like a SO topic, but OK. At first, format the stack trace and your code.

rrreche commented 5 years ago

Hi @rrreche. This looks rather like a SO topic, but OK. At first, format the stack trace and your code.

Done, I had it formatted originally but I edited and messed it up, and I had to go. Sorry for the inconvenience. I 'll post it over at SO too and see if someone can help me there.

radekmie commented 5 years ago

No problem, really. You've done a named export with export const DeploySchema = ..., but imported the default export with import DeploySchema from .... Simply correct the import.

rrreche commented 5 years ago

My bad. And here I was cursing the world. Absolute noob. My apologies and thank you very much. If you got any Monero address I'll gladly tip a beer.