Using createCookie in a route module causes fetcher.Form to do a document reload on submission

[ollieri3]

Reproduction

Head to https://stackblitz.com/edit/node-vqpqlv?file=app%2Froutes%2Findex.tsx , and click the submit button on the form.

You should see that the page does a full reload on submission (it's a bit easier to see if you open the stackblitz preview in a new tab).

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: ^1.7.2 => 1.7.2 
    @remix-run/node: ^1.7.2 => 1.7.2 
    @remix-run/react: ^1.7.2 => 1.7.2 
    @remix-run/serve: ^1.7.2 => 1.7.2

Used Package Manager

npm

Expected Behavior

fetcher.Form submits without causing a navigation or document reload regardless of whether a cookie is defined in the route module.

Actual Behavior

Defining a cookie in a route module causes fetcher.Form subission to do a page navigation / document reload

ℹ️ Update: Workaround

Moving the createCookie call to a module that is not your route module then importing it should prevent this issue.

[rodolphoasb]

Just spent 2 hours on this, until I found this issue! Thanks for raising it! If I move the createCookie to another file and import it wrapped inside a function it works fine and doesn't reload the page.

[ollieri3]

Just spent 2 hours on this, until I found this issue! Thanks for raising it! If I move the createCookie to another file and import it wrapped inside a function it works fine and doesn't reload the page.

@rodolphoasb Same happened to me 😄, apologies, I should've mentioned the workaround. I've updated the issue for anyone else that comes across this.