Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
remix-run-bot committed Aug 30, 2024
1 parent 5117fb7 commit dc3c3e9
Showing 1 changed file with 8 additions and 4 deletions.
12 changes: 8 additions & 4 deletions docs/guides/dependency-optimization.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ title: Dependency optimization
Remix introduced automatic dependency optimization in development behind the `future.unstable_optimizeDeps` [Future Flag][future-flags].
This allows you to opt-into this behavior which will become the default in the next major version of Remix - a.k.a. React Router v7 ([1][rr-v7], [2][rr-v7-2]).

In development, Vite aims to [prebundle dependencies](https://vitejs.dev/guide/dep-pre-bundling.html) so that it can efficiently serve up those dependencies on-demand.
In development, Vite aims to [prebundle dependencies][prebundle-dependencies] so that it can efficiently serve up those dependencies on-demand.
To do this, Vite needs to know where to start crawling your app's module graph to look for dependencies.

Previously, Remix did not inform Vite to start dependency detection at route modules nor at the client entry.
That meant that in development, Vite would encounter new dependencies as you navigated around in your app resulting in `504 Outdated Dependency` errors.
Consequently, the development experience could feel janky at times since those errors could cause HMR to break or link navigations to be aborted.
Navigation could also feel sluggish as processing dependencies interactively could sometimes be slow.

For more information, see [Vite's Dep Optimization Options](https://vitejs.dev/config/dep-optimization-options#dep-optimization-options).
For more information, see [Vite's Dep Optimization Options][vite-s-dep-optimization-options].

## Troubleshooting

Expand All @@ -28,7 +28,7 @@ For more information, see [Vite's Dep Optimization Options](https://vitejs.dev/c
```

This is usually caused by a misconfigured dependency.
You use [publint](https://publint.dev/) to check if the offending package is misconfigured.
You use [publint][publint] to check if the offending package is misconfigured.
To fix the issue, you'll need to use `npm why` or `pnpm why` to determine which of your direct dependencies to add to `optimizeDeps.exclude`.

For example, let's say your app is running into this error:
Expand All @@ -37,7 +37,7 @@ For example, let's say your app is running into this error:
✘ [ERROR] Failed to resolve entry for package "jimp". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]
```

Sure enough, `publint` reports that the [`jimp` package is misconfigured](https://publint.dev/jimp@0.22.12).
Sure enough, `publint` reports that the [`jimp` package is misconfigured][jimp-package-is-misconfigured].
Then, you determine that `jimp` is an indirect dependency being pulled in by your `svg2img` direct dependency:

```sh
Expand All @@ -62,3 +62,7 @@ export default defineConfig({
[future-flags]: ../guides/api-development-strategy
[rr-v7]: https://remix.run/blog/merging-remix-and-react-router
[rr-v7-2]: https://remix.run/blog/incremental-path-to-react-19
[prebundle-dependencies]: https://vitejs.dev/guide/dep-pre-bundling.html
[vite-s-dep-optimization-options]: https://vitejs.dev/config/dep-optimization-options#dep-optimization-options
[publint]: https://publint.dev
[jimp-package-is-misconfigured]: https://publint.dev/[email protected]

0 comments on commit dc3c3e9

Please sign in to comment.