Moving "server-only" to the top of the imports

Like many developers I use Prettier to keep my code base looking consistent. One of the plugins we use is @trivago/prettier-plugin-sort-imports which automatically sorts the order of our imports.

While converting an old Gatsby website to NextJS we wanted to use the server-only package to prevent leaking secrets. By positioning it at the top of the file it would also allow us to quickly identify server only code. Of course the sort imports plugin had very different ideas and diligently moved it further down the list.

import { type ClientPerspective, type QueryParams, createClient } from "next-sanity";import "server-only";

Fixing this should just require adding ^server-only$ to the start of the importOrder setting but the plugin keeping putting it last.

{ "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrder": ["^server-only$", "^[./]"], "importOrderSeparation": true, "importOrderSortSpecifiers": true}

After a little mucking around I realised that it was sorting the modules correctly and putting server-only first but the sorted import list always appeared after the third party modules. This made it look like the plugin wasn't working. Luckily fixing this was trivial thanks to the <THIRD_PARTY_MODULES> placeholder that could be used to sort where they appeared.

{ "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrder": ["^server-only$", "<THIRD_PARTY_MODULES>", "^[./]"], "importOrderSeparation": true, "importOrderSortSpecifiers": true}

With done that all my server-only imports moved to the top of their files.

import "server-only";import { type ClientPerspective, type QueryParams, createClient } from "next-sanity";