I am trying to host my shopify offsite payment extension on docker and then on aws cluster. but the thing is when I am trying to build the docker image it is giving following error
`
[commonjs–resolver] Server-only module referenced by client
./db.server imported by app/payments.repository.js
`
Now if I create the .server folder and put the server files in it, the docker file builds properly but the app does not run properly after that.
I am building a offsite extension I have completed all steps of building an extension. so please suggest accordingly.
Hi Nisarg,
The error you’re encountering, Server-only module referenced by client, typically arises when server-side code is inadvertently included in client-side bundles. This is a common issue when using frameworks like Remix or Next.js, which differentiate between server and client environments.
Here are some steps to address the issue:
1. Separate Server and Client Code
Ensure that any server-specific code (like database access) is not imported or used in client-side files. For example, the db.server module should only be imported in server-side files.
- Move all server-specific logic into files that are exclusively used on the server.
- Use conditional imports or dynamic imports to load server-specific modules only when needed on the server.
2. Check Your Build Configuration
Ensure your build tool (e.g., Webpack, Vite) is correctly configured to exclude server-side code from client-side bundles.
3. Docker Configuration
If creating a .server folder resolves the Docker build issue but breaks the app, it suggests that the app is not correctly resolving imports or paths. Ensure that your app’s module resolution aligns with your folder structure.
4. Shopify Offsite Payment Extension Guidelines
Since you’re building a Shopify offsite payment extension, ensure that your app adheres to Shopify’s guidelines for payment extensions. Refer to the Shopify Payments documentation for detailed instructions on setting up and deploying payment extensions.
5. Testing Locally
Before deploying to Docker or AWS, test your app locally to ensure that both server and client environments are functioning correctly. Use tools like shopify app dev to preview and debug your extension.
This is how my shopify app looks like
This is how it was generated when I first created it so this is not I created something on my own. if Shopify app while creating the remix app generates this things then it is your task to make it right so that when anyone creates shopify app it should be according to the latest standards
