Vite for windows - local dev bundling broken

[JakeGinnivan]

Reproduction

I've been unable to reproduce it outside of my project, I'm not sure what is different but I've spent about a day trying to debug and reproduce the issue. At this point I am just opening a bug report to try get some advice on how I can debug the issue, ideas or even can jump on a call to debug it.

The problem is on Windows (the project works fine on MacOS) that Vite is fetching server modules from the browser.

Here is my Vite plugin configuration.

    ssr: {
        noExternal: ['@nivo/*'],
    },

    plugins: [
        tsconfigPaths(),
        remix({
            serverModuleFormat: 'cjs',
            ignoredRouteFiles: ['**/*'],
            async routes(defineRoutes) {
                // uses the v1 convention, works in v1.15+ and v2
                const routes = createRoutesFromFolders(defineRoutes, {
                    ignoredFilePatterns: ['**/.*', '**/*.css', '**/*.spec.{js,jsx,ts,tsx}'],
                })

                return routes
            },
        }),
        cjsInterop({
            dependencies: ['@emotion/styled/base', '@emotion/server/create-instance', '@emotion/cache'],
        }),
        mdx({
            remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
        }),
    ],

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 3.65 GB / 15.92 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 121.0.6167.85
    Edge: Chromium (120.0.2210.133)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @remix-run/dev: 2.5.1 => 2.5.1 
    @remix-run/eslint-config: 2.5.1 => 2.5.1 
    @remix-run/node: 2.5.1 => 2.5.1 
    @remix-run/react: 2.5.1 => 2.5.1 
    @remix-run/serve: 2.5.1 => 2.5.1 
    vite: ^5.0.12 => 5.0.12

Used Package Manager

pnpm

Expected Behavior

Local development and HMR working on Windows for our project.

Actual Behavior

Which then causes chaos on the server

7:35:45 am [vite] Internal server error: Server-only module referenced by client
    '../../log.server' imported by 'app/lib/db.server.ts'
  See https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code

  Plugin: vite:import-analysis
  File: C:/dev/arkahna-marketplace-elements/apps/portal/app/lib/db.server.ts
      at Context.resolveId (C:\dev\arkahna-marketplace-elements\node_modules\.pnpm\@remix-run+dev@2.5.1_@remix-run+serve@2.5.1_@types+node@20.11.5_typescript@5.3.3_vite@5.0.12\node_modules\@remix-run\dev\dist\vite\plugin.js:726:13)
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
      at Object.resolveId (file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63987:32)
      at TransformContext.resolve (file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63692:23)      
      at normalizeUrl (file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62029:34)
      at file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62191:47
      at async Promise.all (index 1)
      at TransformContext.transform (file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62112:13)    
      at Object.transform (file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64063:30)
      at loadAndTransform (file:///C:/dev/arkahna-marketplace-elements/node_modules/.pnpm/vite@5.0.12_@types+node@20.11.5/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:49741:29)
7:35:45 am [vite] Pre-transform error: Server-only module referenced by client
    './lib/microsoft.server' imported by '../../libs/common-server/src/index.server.ts'
  See https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code
7:35:45 am [vite] Pre-transform error: Server-only module referenced by client
    '../../log.server' imported by 'app/lib/db.server.ts'
  See https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code
Error: No route matches URL "/app/lib/db.server.ts"
    at getInternalRouterError (C:\dev\arkahna-marketplace-elements\node_modules\.pnpm\@remix-run+router@1.14.2\node_modules\@remix-run\router\router.ts:4487:5)
    at Object.query (C:\dev\arkahna-marketplace-elements\node_modules\.pnpm\@remix-run+router@1.14.2\node_modules\@remix-run\router\router.ts:2933:19)
    at handleDocumentRequestRR (C:\dev\arkahna-marketplace-elements\node_modules\.pnpm\@remix-run+server-runtime@2.5.1_typescript@5.3.3\node_modules\@remix-run\server-runtime\dist\server.js:180:35)
    at requestHandler (C:\dev\arkahna-marketplace-elements\node_modules\.pnpm\@remix-run+server-runtime@2.5.1_typescript@5.3.3\node_modules\@remix-run\server-runtime\dist\server.js:105:24)        
    at C:\dev\arkahna-marketplace-elements\node_modules\.pnpm\@remix-run+express@2.5.1_express@4.18.2_typescript@5.3.3\node_modules\@remix-run\express\dist\server.js:41:22
No routes matched location "/app/lib/db.server.ts"
No routes matched location "/app/lib/db.server.ts"

[pcattori]

What looks odd is that '../../log.server' is missing an extension. You can see the Regexs we use:

https://github.com/remix-run/remix/blob/main/packages/remix-dev/vite/plugin.ts#L1060-L1061

which expect .server modules to have an extension. So looks like the lack of extension is causing log.server to be treated as a client-safe module instead of a server-only module. Can you share what that module looks like and what other modules might be importing log.server?

[JakeGinnivan]

I checked this in the plugin while debugging, the extension is optional in that regex. Specifically, I am ending up with .server files being treated as routes, so the options.custom["remix-dot-server"]: true is missing.

My tsconfig.json has

"moduleResolution": "Bundler",
"module": "ESNext",

Which allows modules to be imported without extensions in the codebase. This is all working fine on mac, it's just windows, and while the let serverDirRE = /\/\.server\//; is looking specifically for a / which may not work on windows (unsure if Vite normalises) I'm not using .server folders, only files. So I can't see anything in the remix-dot-server hook of the plugin which is the issue.

The problem is outside of that hook pretty sure, the plugin just breaks because of something earlier in the build process and is a red herring.

[JakeGinnivan]

Ok, figured it out. It is the v1 route convention package (@remix-run/v1-route-convention).

Once I migrated my routes to the v2 method the issue went away. Still not sure why it was causing an issue, but at least it gives me a path forward.