Skip to content

Commit

Permalink
fix(remix-dev/vite): make installGlobals opt-in for Vite dev (#8119)
Browse files Browse the repository at this point in the history
Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>
  • Loading branch information
hi-ogawa and markdalgleish committed Nov 28, 2023
1 parent c043a66 commit a95e5fb
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 3 deletions.
21 changes: 21 additions & 0 deletions .changeset/tidy-timers-share.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
"@remix-run/dev": patch
---

Remove automatic global Node polyfill installation from the built-in Vite dev server and instead allow explicit opt-in.

**This is a breaking change for projects using the unstable Vite plugin without a custom server.**

If you're not using a custom server, you should call `installGlobals` in your Vite config instead.

```diff
import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";

+installGlobals();

export default defineConfig({
plugins: [remix()],
});
```
17 changes: 17 additions & 0 deletions docs/future/vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,8 @@ Vite handles imports for all sorts of different file types, sometimes in ways th
If you were using `remix-serve` in development (or `remix dev` without the `-c` flag), you'll need to switch to the new minimal dev server.
It comes built-in with the Remix Vite plugin and will take over when you run `vite dev`.

Unlike `remix-serve`, the Remix Vite plugin doesn't install any [global Node polyfills][global-node-polyfills] so you'll need to install them yourself if you were relying on them. The easiest way to do this is by calling `installGlobals` at the top of your Vite config.

You'll also need to update to the new build output paths, which are `build/server` for the server and `build/client` for client assets.

👉 **Update your `dev`, `build` and `start` scripts**
Expand All @@ -161,6 +163,20 @@ You'll also need to update to the new build output paths, which are `build/serve
}
```

👉 **Install global Node polyfills in your Vite config**

```diff filename=vite.config.ts
import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";

+installGlobals();

export default defineConfig({
plugins: [remix()],
});
```

#### Migrating from a custom server

If you were using a custom server in development, you'll need to edit your custom server to use Vite's `connect` middleware.
Expand Down Expand Up @@ -696,3 +712,4 @@ We're definitely late to the Vite party, but we're excited to be here now!
[ssr-no-external]: https://vitejs.dev/config/ssr-options.html#ssr-noexternal
[server-dependencies-to-bundle]: https://remix.run/docs/en/main/file-conventions/remix-config#serverdependenciestobundle
[blues-stack]: https://github.com/remix-run/blues-stack
[global-node-polyfills]: ../other-api/node#polyfills
3 changes: 0 additions & 3 deletions packages/remix-dev/vite/node/adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,12 @@ import { Readable } from "node:stream";
import { splitCookiesString } from "set-cookie-parser";
import {
type ServerBuild,
installGlobals,
createReadableStreamFromReadable,
} from "@remix-run/node";
import { createRequestHandler as createBaseRequestHandler } from "@remix-run/server-runtime";

import invariant from "../../invariant";

installGlobals();

function createHeaders(requestHeaders: IncomingHttpHeaders) {
let headers = new Headers();

Expand Down
3 changes: 3 additions & 0 deletions templates/unstable-vite/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
plugins: [remix(), tsconfigPaths()],
});

0 comments on commit a95e5fb

Please sign in to comment.