When linking a npm package to a equivalent local folder, starting dev server with --force is failing

[Nico924]

Describe the bug

I have some privates npm packages that, when installed through pnpm (or npm) works like it should in my vite project.

However when I link this package with a symlink to where it is in my computer, then starting the dev server fails. (when runing vite --force)

I tried to copy paste the exact content of the published package into the linked one (to check if other files where influencing vite) and the issue persist. I was previously doing it with a webpack build system and it worked well.

This is my vite config

import { defineConfig } from 'vite';
// Select between the two available
// import react from '@vitejs/plugin-react';
import react from '@vitejs/plugin-react-swc';

import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig((command) => {
  return {
    plugins: [tsconfigPaths(), react()],
    resolve: {
      // preserveSymlinks: true,
      alias: {
        '~styles': path.resolve(__dirname, 'src/styles'),
        // lodash: path.resolve(__dirname, 'node_modules/lodash'),
        // '@makeit-studio/helpers': path.resolve(__dirname, 'node_modules/@makeit-studio/helpers'),
      },
    },
    esbuild: {
      drop: ['console', 'debugger'],
    },
    // optimizeDeps: {
    //   include: ['@makeit-studio/helpers'],
    //   exclude: ['@makeit-studio/helpers'],
    // },
    define: {
      // used for application with different "mode"
      // __ENV__: JSON.stringify(command.mode || 'default'),
    },
  };
});

I tried to play with optimizeDeps and resolve, without success

When I run the project after linking the first error I get is

The following dependencies are imported but could not be resolved:

  lodash/mergeWith (imported by /Users/[...]/projects/makeit-packages/@makeit-studio/helpers/lib/object/customMerge.js)
  lodash/transform (imported by /Users/[...]/projects/makeit-packages/@makeit-studio/helpers/lib/collection/deepPick.js)
  lodash/isObject (imported by /Users/[...]/projects/makeit-packages/@makeit-studio/helpers/lib/collection/deepPick.js)

That why I tried the resolve alias, but then when I go the resolve alias for lodahs I get

The requested module [...] does not provide an export named 'capitalize' (...)

Reproduction

https://stackblitz.com/edit/vitejs-vite-m2xfhp?file=vite.config.js

Steps to reproduce

1. Run npm install in the download reproduction link
2. copy the folder node_modules/@makeit-studio/helpers somewhere else in your computer
3. link node_modules/@makeit-studio/helpers to that folder
   3.1. npm link where you copied the folder.
   3.2. npm link @makeit-studio/helpers in the download reproduction link
4. run npx vite --force (force is important if you ran the project before doing the link)

You should get the error of my screenshot:

System Info

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
    Memory: 357.89 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.10.0 - ~/.nvm/versions/node/v18.17.0/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.123
    Safari: 16.5
  npmPackages:
    @vitejs/plugin-react: 4.0.3 => 4.0.3 
    @vitejs/plugin-react-swc: 3.4.0 => 3.4.0 
    vite: ^4.4.5 => 4.5.0

Used Package Manager

npm

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 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.

[RSWilli]

we had a similar issue with our vite and our own private npm repo. In our case the browser was complaining about a missing default import.

The reason we concluded was that we used optimizeDeps: {exclude: ["@our/package"] } which seems to skip the commonJS -> ESM described here.

Removing it solved the issue. It was there on the first place since we had issues with updating the local linking because vite had still a version cached in node_modules/.vite/... and not optimizing it seemed to solve the caching issue.

[sapphi-red]

I was able to reproduce, but setting optimizeDeps.includes: ['@makeit-studio/helpers'] fixed the issue for me.
https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies

[dmytro-shapovalov-dataart]

For me it was helpful to go to node_modules/.vite/deps/_metadata.json and analyze real paths where dependencies are taken from during the build.

In our case it was the react hooks error with npm link packages (facebook/react#15812). I found the dependency which was taken from our local package's node_modules (probably for some optimization reasons, idk). I added it to Vite config via include in main application dir, and Vite started to take that dependency from main application's node_modules.

optimizeDeps: { include: ['react-leaflet'] },

[gabrieladeniji]

I am also having this issue with vue, but setting preserveSymlinks: true was able to make it work

resolve: {
    alias: {
      '@app': fileURLToPath(new URL('./src/app', import.meta.url)),
    },
    preserveSymlinks: true,
  },

[sapphi-red]

Closing due to lack of response from the issue author.

[bidodev]

Had the same issue, setting preserveSymlinks: true solved the issue for me! Thanks @gabrieladeniji