Error: Warning: React.createElement: type is invalid

[ljdatasci]

I’m working on the Redwood JS tutorial and I’m getting this error when I try to create the Contact Page
]index.js:1 Warning: 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 ContactPage.
in ContactPage (created by PageLoader)
in PageLoader (created by Loaders)
in Loaders (created by RouterImpl)
in RouterImpl (created by LocationProvider)
in LocationProvider (created by Context.Consumer)
in Location (created by Router)
in Router (created by Routes)
in Routes
in FlashProvider (created by RedwoodProvider)
in ApolloProvider (created by GraphQLProvider)
in GraphQLProvider (created by RedwoodProvider)
in RedwoodProvider
in FatalErrorBoundary

I checked my import statements and the are correct. Is there an issue with rendering in Redwood js?

[Tobbe]

@ljdatasci Sorry you’re having problems completing the tutorial, but great to see you reaching out!

Could you please post some of the relevant code, or share the project with us, so we can take a look?

[ljdatasci]

Contact Page:

import BlogLayout from 'src/layouts/BlogLayout'
import { Form, Label, TextField, Submit } from '@redwoodjs/web'

const ContactPage = () => {
const onSubmit = (data) => {
console.log(data)
}

return (
<BlogLayout>
<Form onSubmit={onSubmit}>
<Label name="name" />
<TextField name="name" />

<Submit>Save</Submit>
</Form>
</BlogLayout>
)
}

export default ContactPage

Routes:

import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
return (
<Router>
<Route path="/contact" page={ContactPage} name="contact" />
<Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" />
<Route path="/posts/new" page={NewPostPage} name="newPost" />
<Route path="/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
<Route path="/posts/{id:Int}" page={PostPage} name="post" />
<Route path="/posts" page={PostsPage} name="posts" />
<Route path="/about" page={AboutPage} name="about" />
<Route path="/" page={HomePage} name="home" />
<Route notfound page={NotFoundPage} />
</Router>
)
}

export default Routes

[Tobbe]

I’m sorry @ljdatasci, it seems most of the important parts of your last message got stripped out

Did you send the reply from your email client? Maybe come here to the site and post instead? It would also help if you put your code in a code block to keep the formatting of the code. Makes it much easier to read You start a code block by having three backticks at the beginning of a row, and end the code block in the same way. Like this

```
function sayHello() {
  console.log('Hello World')
}
```

The code block above will render like this:

function sayHello() {
  console.log('Hello World')
}

[thedavid]

@Tobbe and @ljdatasci I just added code formatting to your post.

You can either use the tick symbols like this:

which will display like this

my code

Or you can highlight text and click the “code” formatted option:

[thedavid]

@ljdatasci would it be possible for you to share the link to a public repository for your project?

At first glance the code above looks ok. This might resolve if you just keep going in the Tutorial.

[forresthayes]

@ljdatasci

The problem might be that the tutorial video is a little out of sync with the current version of the framework.

Rob highlighted one such change on the youtube page for the tutorial video, part 3: http://RedwoodJS Tutorial, Part 3

The Redwood Form component has been moved from @redwoodjs/web to its own package, @redwoodjs/forms

 // web/src/pages/ContactPage/ContactPage.js

import { Form } from '@redwoodjs/forms'
import BlogLayout from 'src/layouts/BlogLayout'

RedwoodJS Tutorial: Add Form Tag to Contact Page

I hope this helps!

[ljdatasci]

I changed the package to @redwoodjs/forms and it worked. Thank you.