Test setup/utils files importing server module gives: Server-only module referenced by client

[kentcdodds]

Reproduction

git clone https://github.com/epicweb-dev/epic-stack.git
cd epic-stack
git checkout vitest-config
npm install
npm run test

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.20 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/n/bin/node
    Yarn: 1.22.17 - ~/n/bin/yarn
    npm: 10.8.1 - ~/n/bin/npm
    pnpm: 8.15.6 - /opt/homebrew/bin/pnpm
    bun: 1.1.10 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 127.1.68.137
    Chrome: 127.0.6533.120
    Safari: 17.5

Used Package Manager

npm

Expected Behavior

I expect the tests to run without issue

Actual Behavior

I get the following error:

 FAIL  app/routes/users+/$username.test.tsx [ app/routes/users+/$username.test.tsx ]
Error: Server-only module referenced by client

    '#app/utils/env.server.ts' imported by 'tests/setup/setup-test-env.ts'

  See https://remix.run/docs/en/main/guides/vite#splitting-up-client-and-server-code

Test files are a special case.

I'm thinking anything out of the app directory should be ignored by this module import check. That would resolve my issue.

[kentcdodds]

Added context, I'm trying to move my vitest.config.ts into the vite.config.ts so we can share config between tests and the app (seems like a good idea). epicweb-dev/epic-stack#822

This person had a similar issue: remix-run/remix#8367 (comment) however their solution was to disable the remix plugin during tests which I think is not a good idea since we want our tests to resemble our running application as much as possible.

[kentcdodds]

I've temporarily disabled the remix plugin in vite during testing, but I would definitely prefer to not have to do that.

[kentcdodds]

Just transferred this issue to the react router repo because it's still an issue with React Router. I've updated the vitest-config branch to the latest of the Epic Stack (which is the latest of RR) and the issue persists:

 FAIL  app/routes/users+/$username.test.tsx [ app/routes/users+/$username.test.tsx ]
Error: Server-only module referenced by client

    '#app/utils/env.server.ts' imported by 'tests/setup/setup-test-env.ts'

  See https://remix.run/docs/en/main/guides/vite#splitting-up-client-and-server-code

  Plugin: vite:import-analysis
  File: /Users/kentcdodds/code/epic-web/epic-stack/tests/setup/setup-test-env.ts:3:7
  1  |  import "dotenv/config";
  2  |  import "./db-setup.ts";
  3  |  import "#app/utils/env.server.ts";
     |          ^
  4  |  import { cleanup } from "@testing-library/react";
  5  |  import { afterEach, beforeEach, vi } from "vitest";
 ❯ ResolveIdContext.resolveId node_modules/@react-router/dev/dist/vite.js:3072:15
 ❯ EnvironmentPluginContainer.resolveId node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:48387:22
 ❯ TransformPluginContext.resolve node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:48591:15
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:46798:26
 ❯ node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:46929:37
 ❯ TransformPluginContext.transform node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:46856:7
 ❯ EnvironmentPluginContainer.transform node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:48465:18
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-Cg8OuIew.js:42166:27

[timdorr]

Maybe we can add a check for viteConfigEnv.mode == 'test' to when we do the react-router:dot-server hook?

[kentcdodds]

Seems reasonable to me. What do you think about my suggestion?

I'm thinking anything out of the app directory should be ignored by this module import check.

[cjbland]

FWIW I like to keep my actions and loaders in separate files and unit test them individually. Is there a way to tell the vite import-analysis plugin to ignore test files and/or directories? My error looks similar to the example above:

FAIL  app/actions/__tests__/signup.test.ts [ app/actions/__tests__/signup.test.ts ]
Error: Server-only module referenced by client

    '~/utils/aws.server' imported by 'app/actions/__tests__/signup.test.ts'

See https://remix.run/docs/en/main/guides/vite#splitting-up-client-and-server-code

Plugin: vite:import-analysis