Remix App : Issue with Importing File: "Server-only module referenced by client"

Topic summary

Main issue: Importing a server-only module in a Remix-based Shopify app triggered the error: “Server-only module referenced by client: ‘../db.server’ imported by route ‘app/routes/app.import.jsx’.” This indicates code intended for server execution was being bundled for the browser.

Resolution shared: The original poster fixed it by not importing shopify.server at the module level where the client can reference it. Instead, they deferred the server-only import to the Remix Loader Function (server-side data loader) before fetching data. In practice, keep server-only modules (e.g., *.server files) inside loaders or other server-only contexts, not in components or client-executed code.

Follow-ups: Another user requested details on the fix, and a further request asked for a more detailed explanation. No additional specifics were provided yet.

Status: Partially resolved by the OP’s guidance; further clarification requested, discussion remains open.

Notes: The key concepts are “server-only module” (usable only on the server) and Remix “Loader Function” (server-side data fetching).

Summarized with AI on December 12. AI used: gpt-5.

Hello everyone,

I’m encountering an issue while trying to import a file in my Shopify app. Specifically, I get the following error message:

Server-only module referenced by client: '../db.server' imported by route 'app/routes/app.import.jsx'

It seems like there’s a conflict between server-side and client-side modules. I’ve checked my import paths and tried a few things, but I haven’t been able to resolve it.

Has anyone faced a similar issue or have any suggestions on how to fix this? Any guidance would be greatly appreciated!

Thank you!

I have fixed this issue on my end. Thanks

Hey, how did you solve it? I’m experiencing the same issue

@josafatgarciasa Do not import shopify.server until you fetch the data using the Loader Function.

Can you explain in more detail?