[RR7 Error/Issue](Likely missing something): Vite transform "failed to load url" error on dynamic Route import

[WillNeve]

🙏 Any help or even small pointers would be very much appreciated

Context

My team has recently started to work on a rr7 migration branch of our remix-run application, currently their seems to be issues when it comes to building with vite (react-router dev).

I will try to provide as much insight into the relevant config but please forgive if I am missing anything that can prove useful for diagnostic.

I have been referencing Upgrading from Remix and seemingly all steps are covered.

Issue

When launching dev server the following error occurs:

11:51:55 AM [vite] Internal server error: Failed to load url ./+types/extract-fields (resolved id: /home/willneve/work/localista/localista-app/.react-router/types/extract-fields) in /home/willneve/work/localista/localista-app/app/routes/api+/contacts+/extract-fields.tsx. Does the file exist?
      at loadAndTransform (file:///home/willneve/work/localista/localista-app/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:41317:17)

I have a few confident assertions:

• Doing tree .react-router/types confirms that there exists generated types for each route
• The imports that are failing at build/dev-server-run time are the Route imports of this pattern (pasting specific example): import {type Route} from './+types/extract-fields'
• Typescript knows about the generated types through the addition of this include item: ".react-router/types/**/*" in tsconfig.json and does not highlight any errors (thus the file can be assumed to exist)
• ?? The issue is to do with vite not finding the type files since they are not actually in ./+types/... for a given route but merged

Config

vite.config.ts

import {reactRouter} from '@react-router/dev/vite'
import dsv from '@rollup/plugin-dsv'
import {resolve} from 'path'
import {defineConfig} from 'vite'
import {envOnlyMacros} from 'vite-env-only'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig(({mode}) => ({
	assetsInclude: ['**/*.webp'],
	server: {
		allowedHosts: mode === 'development' ? ['[redacted]'] : [],
		port: 3000,
		warmup: {
			ssrFiles: [
				// 'app/routes/**/*.tsx',
				// 'app/root.tsx',
				// 'app/components/**/*/tsx',
				'app/**/*.tsx',
			],
		},
	},
	clearScreen: false,
	optimizeDeps: {
		exclude: ['@appsignal/nodejs'],
		entries: [],
	},
	plugins: [reactRouter(), tsconfigPaths(), envOnlyMacros(), dsv()],
	// build: {
	// 	sourcemap: 'inline',
	// 	cssMinify: process.env.NODE_ENV === 'production',
	// 	rollupOptions: {
	// 		output: {
	// 			sourcemap: 'inline',
	// 		},
	// 	},
	// },
	resolve: {
		alias: {
			'.prisma/client/index-browser':
				'./node_modules/.prisma/client/index-browser.js',
			'./+types': resolve(__dirname, '.react-router/types'),
		},
	},
}))

tsconfig.json

{
  "include": [
    "**/*",
    "**/.server/**/*",
    "**/.client/**/*",
    ".react-router/types/**/*"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@react-router/node", "vite/client"],
    "jsx": "react-jsx",
    "rootDirs": [".", "./.react-router/types"],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ESNext",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "verbatimModuleSyntax": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "noEmit": true,
    "allowImportingTsExtensions": true
  }
}

react-router.config.ts

import type {Config} from '@react-router/dev/config'

export default {
	ssr: true,
} satisfies Config

Package.json dev scripts

    "dev": "run-p dev:server",
    "dev:ngrok": "ngrok http --region eu --domain=localista.ngrok.app 3000",
    "dev:reset": "npm ci && prisma migrate dev && prisma generate --sql && rm -rf ./node_modules/.vite && npm run dev",
    "dev:server": "react-router dev",
    "dev:worker": "npx trigger.dev@latest dev",

[tombohub]

any news on this?

[Shawns2759]

i have the same issue

[luciengeorge]

Managed to get it to work by changing my tsconfig.json file

{
  "include": ["**/*.ts", "**/*.tsx", ".react-router/types/**/*"],
  "compilerOptions": {
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "strict": true,
    "skipLibCheck": true,
    "allowImportingTsExtensions": true,
    "noUncheckedIndexedAccess": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "baseUrl": ".",
    "types": ["@react-router/node", "vite/client"],
    "rootDirs": [".", "./.react-router/types"],
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

[CarlosSenobio]

I'm having the same issue with React Router 7.6.1. However, I tested it, and restarting the development server makes it work again.