Wasp•15mo ago

Shared function generates CORS error

Hey! I just finished the Wasp tutorial. Now trying to play around extending the TODO app. I implemented a simple function I want to use both in the front and backend, so I put it in the shared/ dir. It works as expected when I use it in the frontend, but if I invoke it in the backend I get a CORS error. Am I missing any config steps?

10 Replies

miho•15mo ago

but if I invoke it in the backend I get a CORS error.

How do you invoke the function in the backend? Do you just import it and call it? To get a CORS error you ought to send a request client -> backend usually, are you also doing that? Are you using Actions & Queries or custom APIs? If possible, share your code here 🙃

OliverLOP•15mo ago

This is shared/taskChecker.ts

export function checkTask(task: String): { valid: Boolean, message: String } {
    if (task.length > 10) {
        return { valid: false, message: "Task is too long" }
    }
    return { valid: true, message: "" }
}

export function checkTask(task: String): { valid: Boolean, message: String } {
    if (task.length > 10) {
        return { valid: false, message: "Task is too long" }
    }
    return { valid: true, message: "" }
}

And this is the server/actions.ts

import { Task } from '@wasp/entities'
import { CreateTask } from '@wasp/actions/types'
import { checkTask } from '@wasp/shared/taskChecker'

type CreateTaskPayload = Pick<Task, 'text'>

export const createTask: CreateTask<CreateTaskPayload, Task> = async (
  args,
  context
) => {
  // If I comment the next line, the CORS error is gone
  const { valid, message } = checkTask(args.text)
  // The idea is to do something with the data returned by the function

  return context.entities.Task.create({
    data: { text: args.text },
  })
}

import { Task } from '@wasp/entities'
import { CreateTask } from '@wasp/actions/types'
import { checkTask } from '@wasp/shared/taskChecker'

type CreateTaskPayload = Pick<Task, 'text'>

export const createTask: CreateTask<CreateTaskPayload, Task> = async (
  args,
  context
) => {
  // If I comment the next line, the CORS error is gone
  const { valid, message } = checkTask(args.text)
  // The idea is to do something with the data returned by the function

  return context.entities.Task.create({
    data: { text: args.text },
  })
}

The request that is causing the error is the query that gets the tasks

import { Task } from '@wasp/entities'
import { GetTasks } from '@wasp/queries/types'

export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
  return context.entities.Task.findMany({
    orderBy: { id: 'asc' },
  })
}

import { Task } from '@wasp/entities'
import { GetTasks } from '@wasp/queries/types'

export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
  return context.entities.Task.findMany({
    orderBy: { id: 'asc' },
  })
}

miho•15mo ago

And you are running your app with wasp start and get the CORS error? Do you get any other errors in the terminal? I suspect that server is not running due to some random error and thus causing CORS error on the client

Vinny (@Wasp)•15mo ago

@miho could it be the import needs to be from shared/taskChecker.js? or has that been fixed?

miho•15mo ago

That could be it 👍 let's see the terminal output and confirm

OliverLOP•15mo ago

Yes, changing the import to shared/taskChecker.js fixed that! Thank you and sorry for the newbie question 🙏

MEE6•15mo ago

Wohooo @OliverL, you just became a Waspeteer level 1!

Vinny (@Wasp)•15mo ago

no worries. this is an issue I run into a lot refresh my memory @miho when do the imports need .js extension and when don't they? and won't we be fixing that in the future so that imports won't need the .js extension at all?

miho•15mo ago

We will change in at some point yep 👍 Imports on the client don't need it, importing TYPES on server is also fine, all other imports on the server require the extension 🙃

OliverLOP•15mo ago

Nice clarification

Gaming

Programming

Shared function generates CORS error

Did you find this page helpful?