Vite error when importing from .server file. "Error: Server-only module referenced by client" #9035
Replies: 7 comments 24 replies
-
|
#8448 maybe you'll find something useful here |
Beta Was this translation helpful? Give feedback.
-
|
@joaoguidev That is odd. In my |
Beta Was this translation helpful? Give feedback.
-
|
Hello Kiliman. I noticed that different from your project, I'm using folders in my routes. I wonder if Vite and this style of structuring the routes might have something into it. Before migrating to Vite I had no such issue. So my routes look like this: Instead of this: Documentation here Another point worth mentioning is that I'm using the template for Cloudflare: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for providing more information. I'll see if I can reproduce the problem you're having. |
Beta Was this translation helpful? Give feedback.
-
This worked for me as well, thanks. However, it's definitely a step backwards because I have to manually type the import e.g. For what it's worth, I'm also using the folder-based routing, which is great by the way, so I would rather keep it as such. |
Beta Was this translation helpful? Give feedback.
-
|
I get the same error as you @joaoguidev and I also have a nested folder structure in /routes. That said, I don't think this is the issue since the epic stack follows this structure, and it too follows imports from |
Beta Was this translation helpful? Give feedback.
-
|
I am encountering a similar problem. Yet don't know if it's related. Even though the specified import is only used within the action function. Everything works great when using optimizeDeps: {
entries: [
'**/routes/**/*.{ts,tsx}',
],
},Anyone got an idea about this? |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same problem, event when the imported function is only used in the loader |
Beta Was this translation helpful? Give feedback.
-
|
Me too, whereas I seem to be able to use it in action exports just fine. |
Beta Was this translation helpful? Give feedback.
-
|
Specifying all routes like
like, its working for me 😇 Alternative: Use Vite's Auto-Detection
|
Beta Was this translation helpful? Give feedback.
-
|
Not sure what happened but I was going to try the solution @agathiyans28 suggested today and when I went to replicate the build error, I couldn't. Maybe Vite's Auto-Detection kicked in or maybe being on a different computer made it work differently but I no longer get this error. I tried adding |
Beta Was this translation helpful? Give feedback.
-
|
Vite's auto-detection can sometimes handle dependency optimization without manual intervention, so that might explain why adding optimizeDeps didn’t change the build output. It could also be related to differences in the environment between your computers. If everything is working fine now, that’s great. 😄 |
Beta Was this translation helpful? Give feedback.
-
|
For what it's worth: I had a similar problem:
but it turned out, I had imported a function from the I assume this is because remix determines if an import from a .server.js file is actually used in the loader function when deciding to throw this error or not. |
Beta Was this translation helpful? Give feedback.
-
|
yes it worked for me as well. |
Beta Was this translation helpful? Give feedback.
-
|
This does not work for me unfortunately. I still get the same error :( |
Beta Was this translation helpful? Give feedback.
-
|
@isriram make sure you are not importing something else from xxxx.server anywhere else and not using it also as a test return some hard coded value |
Beta Was this translation helpful? Give feedback.
-
|
@navdeep-soni I figured out the problem. I was using that in a component. This used to work in the classic remix compiler, however in the vite compiler it seems that .server.ts files can only be referenced from the routes. |
Beta Was this translation helpful? Give feedback.
-
|
I had the same problem, and this worked for me! |
Beta Was this translation helpful? Give feedback.
-
|
OK now I'm having trouble integrating Trigger.dev because their initialization, which is based on file name routing rather than folder name routing, triggers this error. The automatically generated import { createRemixRoute } from "@trigger.dev/remix";
import { client } from "~/trigger.server";
// Remix will automatically strip files with side effects
// So you need to *export* your Job definitions like this:
export * from "~/jobs/example.server";
export const { action } = createRemixRoute(client);And when I try to build I get the error: Now, I don't think this should be an error and I think it's on the Remix side, but I'm not sure if anyone is working on this issue or if it's just not going to be fixed but I'd like to be able to integrate Remix with Trigger.dev so I'll try to see if they have any tips as well. |
Beta Was this translation helpful? Give feedback.
-
OK I've upgraded to Trigger.dev version 3 and this is no longer a problem. I thought I was initializing a version 3 application automatically since I was approved into the beta but I had to upgrade manually. When Trigger.dev is in version 3, it looks like there are no Remix-based web-hook URLs, so this shouldn't be a problem. |
Beta Was this translation helpful? Give feedback.
-
|
The code in your above post has a side effect, so the action code is not removed from client bundle. |
Beta Was this translation helpful? Give feedback.
-
|
it also happens when you re-export route relevant modules imported from other file. `+loader.tsx`
import { db, post } from '~/server/driver/db.server';
export const loader: LoaderFunction = async () => {
const result = await db.select().from(post).all();
return result;
};
...clientLoader, meta, etc`route.tsx`
...
export { loader, clientLoader, meta, shouldRevalidate } from './+loader';I splitted +loader.file into two, one that exports export { clientLoader, meta, shouldRevalidate } from './+meta';
export { action, headers, loader } from './+server';
export default Route; |
Beta Was this translation helpful? Give feedback.
-
|
This issue arises, when you have *.server files / folder used outside route modules, because remix does not remove *.server imports. It removes just imports from route modules which are only used within loader and action. If it happens to be a *.server import from the route module file, then everything is fine. But when the *.server import is hidden further down the import-chain, remix isn't going to remove it and so the server-only check will fail. Additionally, pure |
Beta Was this translation helpful? Give feedback.
-
|
That's too bad that it doesn't analyze files further down the import chain. But I discovered a workaround—using a dynamic import: import type { LoaderFunctionArgs } from '@remix-run/node'
export async function loader(args: LoaderFunctionArgs) {
// do a dynamic import to work around remix's lack of support for re-exporting
// loaders that depend on server-only modules
const importedLoader = (
await import(
'~/routes/my-route/my-loader.server'
)
).loader
return importedLoader(args)
}Another workaround would be to use https://github.com/pcattori/vite-env-only |
Beta Was this translation helpful? Give feedback.
-
|
The package The behavior makes sense: imagine you import a file Though I think there might be a thing that could be improved, because it seems to me its not the case currently: // bad: notice type is within {}
import {type Foo} from "./foo" // -> leaves import {} from "..."
// good: notice type outside {}
import type {Foo} from "./foo"it traverses the empty import and hits some potential In case its run before tree-shaking, maybe it can be changed to run after. The later would assume that when you don't import just as a side-effect |
Beta Was this translation helpful? Give feedback.
-
|
okay so if we're not supposed to use actions outside of routes, how do I do something like... have a signout button in a header that's present everywhere? It seems heavy-handed that Remix should dictate that my header must be part of my dashboard component and can't be a separate file... |
Beta Was this translation helpful? Give feedback.
-
|
Create a /signout page that performs the action. Redirect the user there when he clicks the btn. |
Beta Was this translation helpful? Give feedback.
-
|
You can also use a resource route for the signout with an action only to get the POST request: https://reactrouter.com/how-to/resource-routes |
Beta Was this translation helpful? Give feedback.
-
|
thanks for the thoughtful suggestions, both :) |
Beta Was this translation helpful? Give feedback.
-
Hello.
I have a file named validation.server.jsx that I use to export a schema validation function.
As the name indicates, it is a .server file with code to run exclusively server-side.
I then use the exported function from the referred file to validate data inside the action of my route.jsx.
Now with Vite, Im getting the error below just by importing the function from the validation.server.jsx file into my app/routes/admin/route.jsx.
import { validateSchema } from "../../lib/validation.server"By making this import I get the error or any import from a .server file into a route.jsx file i get the error:
It seems that it was dealt with before but im still getting this problem: #8267
Beta Was this translation helpful? Give feedback.
All reactions