Importing my db helper into a component broke the build with a next/headers error, where is the boundary supposed to sit
I have a components folder where roughly half the files start with 'use client' because they use state, and a getSession helper that reads cookies. Importing that helper into one of those components gives a build error about next/headers not being allowed. I can make the error go away by moving things around semi randomly and I would rather understand the rule than keep guessing.
@till_and_tally · 3mo ago · 3 replies
The mental model that fixes this permanently is that 'use client' is not a label on one file, it is a door into the client bundle. Everything that file imports, and everything those files import, gets pulled through the door with it, which is why a helper that reads cookies suddenly finds itself being compiled for the browser and complains. The boundary is therefore not where you wrote the directive, it is the entire subtree below it. Once you see it as a subtree rather than a file, the placement rules stop feeling arbitrary.
Reply
Report
@hemline_hank · 3mo ago
Add the server only package to that helper and the error becomes explicit at build time instead of a confusing complaint about headers.
Reply
Report
@yaml_yuri · 3mo ago
Subtree rather than file is the bit I was missing. That explains why moving an import fixed it in a way that seemed like magic.
Reply
Report