Error: Unexpected token < in JSON at position 0

I’m getting an error when I deploy to Netlify:

Error: Unexpected token < in JSON at position 0

The console log says: /.redwood/functions/graphql:1 Failed to load resource: the server responded with a status of 404 ()

I deployed with postgresql and connected my app to Heroku PostgreSQL. The link to the netlify app is: https://elated-leakey-191a54.netlify.app/. Does Netlify work with Heroku?

Here’s the code to my ContactPage.js:

import BlogLayout from ‘src/layouts/BlogLayout’
import {
Form,
FormError,
Label,
TextField,
TextAreaField,
FieldError,
Submit,
} from ‘@redwoodjs/forms’
import { useMutation } from ‘@redwoodjs/web’
import { useForm } from ‘react-hook-form’

const CREATE_CONTACT = gql mutation CreateContactMutation($input: CreateContactInput!) { createContact(input: $input) { id } }

const ContactPage = () => {
const formMethods = useForm()

const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
onCompleted: () => {
alert(‘Thank you for your message!’)
formMethods.reset()
},
})

const onSubmit = (data) => {
create({ variables: { input: data } })
console.info(data)
}

return (

<Form
onSubmit={onSubmit}
validation={{ mode: ‘onBlur’ }}
formMethods={formMethods}
error={error}
>
<FormError
error={error}
wrapperStyle={{ color: ‘red’, backgroudColor: ‘lavenderblush’ }}
/>

Your Name

<TextField
name=“name”
className=“input”
errorClassName=“error”
validation={{ required: true }}
/>
<FieldError style={{ color: ‘red’ }} name=“name” />

    <Label errorClassName="error" name="email">
      Your Email{' '}
    </Label>
    <TextField
      name="email"
      className="input"
      errorClassName="error"
      validation={{ required: true, pattern: { value: /[^@]+@[^.]+\..+/ } }}
    />
    <FieldError style={{ color: 'red' }} name="email" />

    <Label errorClassName="error" name="message">
      Your Message{' '}
    </Label>
    <TextAreaField
      name="message"
      className="input"
      errorClassName="error"
      validation={{ required: true }}
    />
    <FieldError style={{ display: 'block', color: 'red' }} name="message" />

    <Submit disabled={loading}>Save</Submit>
  </Form>
</BlogLayout>

)
}

export default ContactPage

:wave: Hi @ljdatasci !

I took a quick look at the site your posted and saw:

createHttpLink.js:76 POST https://elated-leakey-191a54.netlify.app/.redwood/functions/graphql 404

I would have expected

.netlify/functions/graphql

But that function doesn’t appear to be available.

  1. Can you share a repo so we can check the code?
  2. Did you see any errors in the Deploy build log?
  3. Did you run yarn rw generate deploy netlify to update the redwood.toml and create a netlify.toml file for deployment?
  4. Did you set the DATABASE_URL env var in the Netlify UI for Build & Deploy > environment settings with the connection string to the Heroku PG database?

Yes, it can connect to Postgres databases provided by Heroku.

Thanks - hope we can get this sorted out.

1 Like

I ran the redwood.toml command and it worked. Thank you.

1 Like