Module resolution of declared exports doesn't work for local package

[hybridherbst]

Describe the bug

Follow-up to #15319.

I'm having issues with vite not correctly resolving imports when a dependency package is a local package. In that case it seems all information in the package.json of that local package is ignored, including exports and sideEffects, causing various unexpected problems.

I think I found a reliable way to reproduce:

In a super basic project like https://stackblitz.com/edit/vitejs-vite-bmmruk, if you clone it locally and switch from

"dependencies": {
    "three": "0.160.0"
}

to a local clone of the three.js repo on the r160 tag:

"dependencies": {
    "three": "file:/Users/herbst/git/three.js"
}

Then you immediately get module resolution errors and nothing works:

Error: The following dependencies are imported but could not be resolved:

  three (imported by /Users/herbst/git/three.js/examples/jsm/nodes/materials/Line2NodeMaterial.js)

Are they installed?
    at file:///Users/herbst/git/local-three-pkg/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:65148:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/herbst/git/local-three-pkg/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:64548:38

... until a vite.config.js is added that aliases all of the things already declared in the package.json of three.js:

import path from 'path'

// vite.config.js
export default {
    // config options
    resolve: {
        alias: {
            'three/nodes': path.resolve(__dirname, 'node_modules/three/examples/jsm/nodes/Nodes.js'),
            'three/addons': path.resolve(__dirname, 'node_modules/three/examples/jsm'),
            'three': path.resolve(__dirname, 'node_modules/three'),
        },
    },
  }

If you, after adding the aliases, do npm run preview you'll see that sideEffects specified in three's package.json are also not respected; there is missing functionality / a broken build as described in #15319.

My expectation would be that

• no alias is needed, since the package.json of three.js still provides the needed information
• side effects are still applied even if it's a local package

Reproduction

https://stackblitz.com/edit/vitejs-vite-bmmruk

Steps to reproduce

1. Clone the reproduction project
2. Clone the three.js repository and switch to the r160 tag: https://github.com/mrdoob/three.js
3. Point the three dependency at your local repository
4. npm i && npm run dev
5. Note module resolution errors until the alias's as defined above are added

System Info

System:
    OS: macOS 14.1.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 724.88 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
    Edge: 115.0.1901.188
    Safari: 17.1.2
  npmPackages:
    vite: ^5.0.8 => 5.0.10

Used Package Manager

npm

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-bmmruk (Open reproduction)

[XiSenao]

It seems that esbuild is unable to internally resolve the sub-dependencies of local package. This issue seems to occur only in npm package manager.

[hybridherbst]

Thanks for investigating. Does that mean an issue with esbuild should be opened? I’m not quite sure how to use that without vite.

Also, is there a workaround for specifying the side effects of the sub-package in the project, so that builds would work?

[XiSenao]

Sorry for missing some information due to my negligence.

It seems that npm uses symlinks to handle local package. By default, Vite will obtain the real path of the module (i.e. the path after following symlinks), which causes the current issue. To address this behavior of npm, you need to force Vite to obtain the original file path (i.e. the path without following symlinks) by configuring preserveSymlinks, so that your program can run normally.

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    preserveSymlinks: true
  }
})

[hybridherbst]

So is this something that should always be set to true when using any local packages? Not sure I understand what's a bug here vs. expected behaviour – for me it is certainly unintuitive that I need to change defaults when switching from a production package to a local package.

[XiSenao]

I personally feel that in most cases, if the package manager (excluding pnpm) directly symlinks local packages, you may need to use a configuration option similar to preserveSymlinks to change the behavior of the build tool. This seems to be an issue that package managers need to pay attention to, and most build tools may have such problems.

[AmreeshTyagi]

Even after setting preserveSymlinks=true in Remix V2 project, i am getting same issue with prisma client for which I generated client in node_module/<my_custom_folder> folder.

I have changed module type to commonjs in package.json as cjs in remix config, still not working. While it was working without vite in Remix v2 with remix dev

[XiSenao]

I hope you can open a new issue and provide a reproducible repository, which may make it easier to help you. @AmreeshTyagi

[sapphi-red]

I tried the reproduction with 5.1.6 and 5.2.0-beta.0. 5.1.6 didn't work but 5.2.0-beta.0 worked.
I guess this was fixed by #16068.