Starting with React / Uniform

help
1

Hi Everybody,

I’m starting my first project with React. It seems that Uniform is the most used package to create forms, so I’m starting with that. However, I’ve run in to a problem.
I started the project using this boilerplate: https://github.com/onezoomin/meteor-react-semantic
And now I’m trying to add the form…

The file I call the form in is here: meteor-react-semantic/imports/ui/pages/
and the schema is here: meteor-react-semantic/imports/api/schema.js
But I do not think the position of the files is the problem?

The schema, however, I copied from the HowTo; that should be ok:

import {SimpleSchema} from 'meteor/aldeed:simple-schema';

export const PersonSchema = new SimpleSchema({
    title: {
        type: String,
    },
    authorName: {
        type: String,
        optional: true,
    },
    content: {
        type: String,
        min: 10
    },
    status: {
        type: String,
        allowedValues: ['draft', 'published'],
        defaultValue: 'draft'
    }
});

and I call it like this in meteor-react-semantic/imports/ui/pages/home.jsx:

import React from 'react';

import {Image, Grid, Segment, Menu, Modal, Header} from 'semantic-ui-react';
import {PersonSchema} from '/imports/api/schema';
import {AutoForm} from 'uniforms-semantic';

export default class Home extends React.Component {
    render() {
        return (

          <AutoForm
              schema={PersonSchema}
              onSubmit={this.onSubmit}
          />

        );
    }
}

But I get this error:

The above error occurred in the <AutoValidatedQuickSemanticForm> component:
    in AutoValidatedQuickSemanticForm (created by Home)
    in Home (created by Route)
    in Route
    in Switch
    in div
    in Router (created by BrowserRouter)
    in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. modules.js:18910:13
Error: Unrecognised schema: [object Object] modules.js:25105:15
Error: Unrecognised schema: [object Object] modules.js:25105:15

Which seems to me like it does not evaluate the object in schema.js correctly :frowning:

Anyway: help! :slight_smile:

2

You need to use a bridge for simple schema, not the simple schema directly.

import React from 'react';

import {Image, Grid, Segment, Menu, Modal, Header} from 'semantic-ui-react';
import {PersonSchema} from '/imports/api/schema';
import {AutoForm} from 'uniforms-semantic';
import {SimpleSchemaBridge} from 'uniforms-semantic';

export default class Home extends React.Component {
    constructor(props) {
       super(props);
       this.schema = new SimpleSchemaBridge(PersonSchema);
    }

    render() {
        return (

          <AutoForm
              schema={this.schema}
              onSubmit={this.onSubmit}
          />

        );
    }
}
3

Hi,

thanks for your answer!
However, it does not work…
I copied your code, but then the error is: SimpleSchemaBridge is not a constructor
I tried reading up on this, but https://uniforms.tools/docs/api-bridges does nothing to explain it :frowning:
Maybe even more confusing is that the Quickstart does not mention bridges? I’m trying to understand this, but working from the basic docs can be really opague sometimes… “Do this, and it will work!” - huh, nope, it does not :pleading_face:

regards,

Paul

4

You just need to import the uniforms-bridge-simple-schema somewhere at the top level of your client code.

Also you should use the simpl-schema since the Meteor package is deprecated. Then import the uniforms-bridge-simple-schema-2 instead

5

To clarify… It doesn’t have to be client only code and can run on the server in cases such as SSR. I just generally import it in the same file I define the root component for my app.

6

I’m sorry; I really appreciate the time you take to answer me, but I’m really not getting you :flushed:
I’m trying to follow the React ToDo from the Meteor tutorials. I have some experience with Meteor, and I would like to use React with something like Autoform. So, I downloaded a boilerplate. I got that :slight_smile:
Now, I’m trying to add Uniform (being advertised as a super simple autoform for React.)
But it is way harder (for me) than it should be :upside_down_face:
I will try and study some more!

regards,

paul

7

Not a problem… We all have to start somewhere.

So lets start with the deprecation of aldeed:simple-schema. This package no longer maintained and will only ever receive critical bug fixes. It has been superseded by simple-schema-js which is published to npm as simpl-schema. You’ll just need to remove the one package and add the other, and then import the proper package in your code.

$ meteor remove aldeed:simple-schema
$ meteor npm install simpl-schema

Then in your code where you define your schema…

import SimpleSchema from 'simpl-schema';

export const PersonSchema = new SimpleSchema({
    title: {
        type: String,
    },
    authorName: {
        type: String,
        optional: true,
    },
    content: {
        type: String,
        min: 10
    },
    status: {
        type: String,
        allowedValues: ['draft', 'published'],
        defaultValue: 'draft'
    }
});

After that you’ll be up to date and not using an outdated version of simple-schema.

Now to use it with Uniforms, you have to import a package that lets the uniforms package know how to interact with the type of schema you are using. Since we’ve updated SimpleSchema you are using version 2.x.x and will need the uniforms-bridge-simple-schema-2 package.

$ meteor npm install uniforms-bridge-simple-schema-2

Then you just need to import this package before using the schema in any of your Uniforms components. I generally do this at the in the same file as the root (App) component. That way it’s been I don’t have to import it in every file that has a component that uses Uniforms.

import React from 'react';
import 'uniforms-bridge-simple-schema-2';

const App = () => (
  <div>...</div>
);

export default App;

Hopefully this is helpful. If you have other questions, don’t hesitate to ask.

8 
meteor npm i uniforms-bridge-simple-schema-2

Make sure you’ve added the package and the code I posted should work.

9

A bit late, but I’d like to make everything clear (not just make it work) here. If you started using uniforms recently and ran npm install uniforms it installed the latest, 2.0.0-alpha.1 version. Don’t worry, it’s completely OK to use an alpha version here!

The 1.x.x version automatically wired up the schemas (like meteor/aldeed:simple-schema and simpl-schema), where the new one requires you to install and require (once in the whole app, before using any Bridge and/or AutoForm) corresponding bridge package: uniforms-bridge-simple-schema for meteor/aldeed:simple-schema and uniforms-bridge-simple-schema-2 for simpl-schema.

It’s the main reason of this major version bump. Decoupling schemas simplified a lot of things and solved problems with bundlers (namely Meteor, Webpack, and Metro). A detailed migration guide is currently only in CHANGELOG.md, sorry. We are still working on the new docs, focusing mainly on new users just like you!

@copleykj: Thank you for that very in-detail descriptions!

@docforce: meteor add won’t work here, as uniforms and all related packages are on npm, not Atmosphere, where meteor add installs only Meteor packages from Atmosphere.