Vite: Build step doesn't work when an export from route file has a server dependency

[alicanerdogan]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

A repo is created to reproduce the issue: alicanerdogan/remix-vite-export-from-route@30d8e71

The changes to the unstable-vite-express template is in the following commit: alicanerdogan/remix-vite-export-from-route@30d8e71

File: app/lib/service.server.ts

export const getData = () => ({ data: { randomNumber: 5 } });

File: app/routes/_index.tsx

import { json, LoaderFunction, type MetaFunction } from "@remix-run/node";
import { getData } from "~/lib/service.server";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export const getRandomNumber = () => {
  return getData().data.randomNumber;
};

export const loader: LoaderFunction = () => {
  return json({ randomNumber: getRandomNumber() });
};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
...

Run the following command in the terminal:

pnpm run build

Expected Behavior

The assets will be built successfully.

Actual Behavior

The assets are not built.

Here is the error message:

 pnpm run build

> remix-vite-export-from-route@ build /Users/remix-vite-export-from-route
> vite build && vite build --ssr

vite v4.5.0 building for production...

  ⚠️  Remix support for Vite is unstable
     and not recommended for production

✓ 50 modules transformed.
✓ built in 483ms
"getData" is not exported by "app/lib/service.server.ts", imported by "app/routes/_index.tsx".
file: /Users/remix-vite-export-from-route/app/routes/_index.tsx:1:9
1: import { json, LoaderFunction, type MetaFunction } from "@remix-run/node";
            ^
2: import { getData } from "~/lib/service.server";
error during build:
RollupError: "getData" is not exported by "app/lib/service.server.ts", imported by "app/routes/_inde
x.tsx".
    at error (file:///Users/remix-vite-export-from-route/node_modules/.pnpm/rol
[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Module.error (file:///Users/remix-vite-export-from-route/node_modules/.p
npm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
    at Module.traceVariable (file:///Users/remix-vite-export-from-route/node_mo
dules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14175:29)
    at ModuleScope.findVariable (file:///Users/remix-vite-export-from-route/nod
e_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12615:39)
    at ReturnValueScope.findVariable (file:///Users/remix-vite-export-from-rout
e/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at ChildScope.findVariable (file:///Users/remix-vite-export-from-route/node
_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at Identifier.bind (file:///Users/remix-vite-export-from-route/node_modules
/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:8319:40)
    at CallExpression.bind (file:///Users/remix-vite-export-from-route/node_mod
ules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at CallExpression.bind (file:///Users/remix-vite-export-from-route/node_mod
ules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:9890:15)
    at MemberExpression.bind (file:///Users/remix-vite-export-from-route/node_m
odules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5892:23)

[alicanerdogan]

The workaround is to move the exported function to a non-route file.

IMO, this might be an indicator of poor structure. Because this only happens when route files exports stuff for the purpose of reuse. In other words, the route file might not be the best place for sharing logic.

[pcattori]

Potential duplicate of #7864

[pcattori]

Duplicate of #7924

[cliffordfajardo]

IMO, this might be an indicator of poor structure. Because this only happens when route files exports stuff for the purpose of reuse. In other words, the route file might not be the best place for sharing logic.

In my case, I have a bunch of barrel exports in my remix codebase and I'm resolving these errors 1 by 1;

I've done this v1 to v2+vite migration 4-5 times already for other apps at work and only running into challenges in 1 particular codebase that has lots barrel exports files

What are barrel files?

• https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/
• https://twitter.com/cramforce/status/1712847884255953280

[pcattori]

Duplicate of #7864