diff --git a/.changeset/bright-rocks-share.md b/.changeset/bright-rocks-share.md new file mode 100644 index 000000000..c1ef65d42 --- /dev/null +++ b/.changeset/bright-rocks-share.md @@ -0,0 +1,5 @@ +--- +"@solidjs/router": patch +--- + +Add an error message to when calling an action without first wrapping it in `useAction` diff --git a/src/data/action.ts b/src/data/action.ts index ec8b6fa61..fb27a4517 100644 --- a/src/data/action.ts +++ b/src/data/action.ts @@ -60,6 +60,40 @@ export function action, U = void>( name?: string ): Action { function mutate(this: { r: RouterContext; f?: HTMLFormElement }, ...variables: T) { + if (typeof this !== 'object' || !Object.hasOwn(this, 'r')) { + throw new Error(`Seems like you are directly calling a function wrapped in "action". To properly use an action, you will need to first call "useAction". + +So, if you have code like this: + +1 const myFunc = action(...); +2 +3 / function MyComponent() { +4 | return +9 } + +You will need to change it to something like: + +1 const myAction = action(...); +2 +3 function MyComponent() { +4 const callMyAction = useAction(myAction); +5 +6 return +11 } + +This is the case because the action will need to tune itself to the surrounding context for the Router so that it can +keep track of all the submissions. See https://docs.solidjs.com/solid-router/concepts/actions#creating-actions for more information on how to use actions. +`) + } const router = this.r; const form = this.f; const p = (