Pre-Bundled dependencies used over locally linked dependency when built before linking

Describe the bug

Reproduction instructions

1. Download https://stackblitz.com/edit/vitejs-vite-9ibgrz (just a base Vite project with a my-test-project directory that has a boilerplate package.json to use)
   • StackBlitz uses turbo under the hood for installing packages and I can’t figure out how to do the local linking which is essential the reproduction. yarn link -> ERR!: Unknown command 'link'
2. yarn
3. Fake a yarn add my-test-dependency by running cp -R my-test-dependency node_modules/my-test-dependency
4. yarn dev (this will create pre-bundled dependencies for my-test-dependency and populate node_modules/.vite)
5. Notice my-test-dependency asdf log in the devtools console
6. Get my-test-dependency ready for linking: cd my-test-dependency && yarn link && cd ..
7. Locally link it in your project: yarn link my-test-dependency
8. yarn dev
9. Notice my-test-dependency asdf log in the devtools console
10. Edit ./my-test-dependency/index.js to a different console.log('other message') just to show that Vite is pulling from the wrong spot
11. Notice how the log message never changes to what you set

This use-case happens when you’re doing some development on a project, find a problem in a sub-dependency, then link it locally to dive deeper.

Expected result

Vite would see that the dependency/package is now linked locally and will bust it’s own pre-bundle cache.

Workaround

1. Clear your pre-bundled dependency build cache rm -rf ./node_modules/.vite
2. Notice how Vite is correctly bundling your locally linked package now and has the updated message

Dev notes

Relevant docs:

• https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
• https://vitejs.dev/guide/dep-pre-bundling.html

Reproduction

StackBlitz uses turbo under the hood for installing packages and I can’t figure out how to do the local linking which is essential the reproduction. yarn link -> ERR!: Unknown command 'link'. See the reproduction steps above instead ^

System Info

• vite@2.7.13

npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
npx: installed 1 in 2.131s

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stagas]

That’s sounds great. I experience same issue… If it works, you definitely save my day ! Where can i add this code ?

@AntoineParent You need to pass the root from your config and have an optimizeDeps = { exclude: [] } object defined earlier so that it is populated. Then you pass them to your Vite config however you run it. See the Vite config docs for more details. Note that it might not solve for every case, it currently solves mine which is symlinking packages i own (using npm link pkg-name --save so that they get a file: url in the dependencies) and then having also dependencies that use the npm versions of those packages, work side-by-side, as they’ll both use their own version when they’re excluded from optimizeDeps.

[stagas]

This is the code i used to solve this in a generic way, in case it’s useful to anyone. It traverses all linked packages and finds all module specifiers and puts them in optimizeDeps.exclude:

const visitedPackages = new Set()
const excludeLinks = (root: string) => {
  if (visitedPackages.has(root)) return
  visitedPackages.add(root)

  try {
    const json = fs.readFileSync(path.resolve(path.join(root, 'package.json')), 'utf-8')
    const pkg = JSON.parse(json)
    for (
      const [name, version] of [
        ...Object.entries(pkg.dependencies),
        ...Object.entries(pkg.devDependencies),
      ] as [string, string][]
    ) {
      if (version.startsWith('file:')) {
        if (!optimizeDeps.exclude!.includes(name)) {
          optimizeDeps.exclude!.push(name)
          const target = path.resolve(root, version.replace('file:', ''))
          excludeLinks(target)
        }
      }
    }
  } catch {}
}
excludeLinks(root)