Skip to content

Commit 7316d95

Browse files
serhalpserhalp
authored
fix(vite-plugin-react-router): fix custom build.assetsDir edge case (#578)
1 parent a828880 commit 7316d95

File tree

21 files changed

+385
-9
lines changed

21 files changed

+385
-9
lines changed

‎packages/vite-plugin-react-router/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
"dependencies": {
6161
"@netlify/edge-functions": "^3.0.2",
6262
"@netlify/functions": "^5.1.0",
63-
"isbot": "^5.1.25"
63+
"isbot": "^5.1.25",
64+
"tinyglobby": "^0.2.10"
6465
},
6566
"devDependencies": {
6667
"@types/react": "^18.0.27",

‎packages/vite-plugin-react-router/src/plugin.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { mkdir, writeFile, readdir } from 'node:fs/promises'
1+
import { mkdir, writeFile } from 'node:fs/promises'
22
import { dirname, join, relative, resolve, sep } from 'node:path'
33
import { sep as posixSep } from 'node:path/posix'
44

55
import type { Plugin, ResolvedConfig } from 'vite'
6+
import { glob } from 'tinyglobby'
67

78
import { version, name } from '../package.json'
89

@@ -177,12 +178,14 @@ export function netlifyPlugin(options: NetlifyPluginOptions = {}): Plugin {
177178
// RR7's build out dir contains /server and /client subdirectories. This is documented and
178179
// not configurable, so the client out dir is always at ../client from the server out dir.
179180
const clientDir = join(resolvedConfig.build.outDir, '..', 'client')
180-
const entries = await readdir(clientDir, { withFileTypes: true })
181-
const excludedPath = [
182-
'/.netlify/*',
183-
...entries.map((entry) => (entry.isDirectory() ? `/${entry.name}/*` : `/${entry.name}`)),
184-
...additionalExcludedPaths,
185-
]
181+
const clientFiles = await glob('**/*', {
182+
cwd: clientDir,
183+
// We can't exclude entire directories because there could be `foo/bar.baz` in the
184+
// client dir and a `/foo` route handled by the server function.
185+
onlyFiles: true,
186+
dot: true,
187+
})
188+
const excludedPath = ['/.netlify/*', ...clientFiles.map((file) => `/${file}`), ...additionalExcludedPaths]
186189

187190
// Write the server entry point to the Netlify Edge Functions directory
188191
const edgeFunctionsDir = join(resolvedConfig.root, NETLIFY_EDGE_FUNCTIONS_DIR)

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/e2e/fixtures/react-router-edge-basepath/app/app.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
html,
6+
body {
7+
@apply bg-white dark:bg-gray-950;
8+
9+
@media (prefers-color-scheme: dark) {
10+
color-scheme: dark;
11+
}
12+
}

‎tests/e2e/fixtures/react-router-edge-basepath/app/entry.server.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'virtual:netlify-server-entry'

‎tests/e2e/fixtures/react-router-edge-basepath/app/root.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
2+
3+
import type { Route } from './+types/root'
4+
import stylesheet from './app.css?url'
5+
6+
export const links: Route.LinksFunction = () => [
7+
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
8+
{
9+
rel: 'preconnect',
10+
href: 'https://fonts.gstatic.com',
11+
crossOrigin: 'anonymous',
12+
},
13+
{
14+
rel: 'stylesheet',
15+
href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
16+
},
17+
{ rel: 'stylesheet', href: stylesheet },
18+
]
19+
20+
export function Layout({ children }: { children: React.ReactNode }) {
21+
return (
22+
<html lang="en">
23+
<head>
24+
<meta charSet="utf-8" />
25+
<meta name="viewport" content="width=device-width, initial-scale=1" />
26+
<Meta />
27+
<Links />
28+
</head>
29+
<body>
30+
{children}
31+
<ScrollRestoration />
32+
<Scripts />
33+
</body>
34+
</html>
35+
)
36+
}
37+
38+
export default function App() {
39+
return <Outlet />
40+
}
41+
42+
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
43+
let message = 'Oops!'
44+
let details = 'An unexpected error occurred.'
45+
let stack: string | undefined
46+
47+
if (isRouteErrorResponse(error)) {
48+
message = error.status === 404 ? '404' : 'Error'
49+
details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details
50+
} else if (import.meta.env.DEV && error && error instanceof Error) {
51+
details = error.message
52+
stack = error.stack
53+
}
54+
55+
return (
56+
<main className="pt-16 p-4 container mx-auto">
57+
<h1>{message}</h1>
58+
<p>{details}</p>
59+
{stack && (
60+
<pre className="w-full p-4 overflow-x-auto">
61+
<code>{stack}</code>
62+
</pre>
63+
)}
64+
</main>
65+
)
66+
}

‎tests/e2e/fixtures/react-router-edge-basepath/app/routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { type RouteConfig, index, route } from '@react-router/dev/routes'
2+
3+
export default [index('routes/home.tsx'), route('animals', 'routes/animals.tsx')] satisfies RouteConfig

‎tests/e2e/fixtures/react-router-edge-basepath/app/routes/animals.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Animals() {
2+
return (
3+
<div>
4+
<h1>Animaux</h1>
5+
</div>
6+
)
7+
}

‎tests/e2e/fixtures/react-router-edge-basepath/app/routes/home.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Route } from './+types/home'
2+
import { Welcome } from '../welcome/welcome'
3+
4+
export function meta({}: Route.MetaArgs) {
5+
return [{ title: 'FR - New React Router App' }, { name: 'description', content: 'Bienvenue à React Router!' }]
6+
}
7+
8+
export default function Home() {
9+
return <Welcome />
10+
}

‎tests/e2e/fixtures/react-router-edge-basepath/app/welcome/logo-dark.svg‎

Lines changed: 23 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)