ViteJS doesn't seem to properly resolve symlinks

[dbismut]

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue.
• This is a concrete bug.

Describe the bug

ViteJs doesn't properly resolve symlinks.

Reproduction

Repro repo: https://github.com/dbismut/preconstruct-repro
After installing dependencies, please run yarn vite.

See comment here for hint at a solution.
preconstruct/preconstruct#378 (comment)

Relevant bit from comment

We might notice here that the importer is in the dist directory - but it's actually a linked file and thus it should be resolved to the real path (in the src directory). This is IMHO a problem with Vite's resolver as this works correctly with most of the popular tools.
This particular issue can be fixed by adjusting the body of this condition:

vite/packages/vite/src/node/plugins/resolve.ts

Lines 348 to 355 in 39820b9

	if (
	!resolved.includes('node_modules') || // linked
	!server || // build
	server._isRunningOptimizer || // optimizing
	!server._optimizeDepsMetadata
	) {
	return { id: resolved }
	}

to:

resolved = fs.realpathSync(resolved)
return { id: resolved }

but I'm not super convinced that this is the appropriate place for the fix - the resolving logic in Vite is quite complex and has some layers. So it would really be best for them to assess at what level this should be fixed. It's also worth noting that it might be worthwhile to use fs.realpathSync.native if it's available in the given node version.

System Info

• vite version: 2.0.5
• Operating System: MacOS 11.2.2
• Node version: 12.8.4
• Package manager (npm/yarn/pnpm) and version: yarn 2.4.1

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[vite] Internal server error: Failed to resolve import "./data". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/david/repos/preconstruct-repro/packages/a/dist/myrepo-a.esm.js
  1  |  import { data } from "./data";
     |                        ^
  2  |  
  3  |  export function fn1() {
      at formatError (/Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:45829:46)
      at TransformContext.error (/Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:45825:19)
      at normalizeUrl (/Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:47321:26)
      at async TransformContext.transform (/Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:47450:57)
      at async Object.transform (/Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:46027:30)
      at async transformRequest (/Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61631:29)
      at async /Users/david/repos/preconstruct-repro/node_modules/vite/dist/node/chunks/dep-e0f09032.js:61739:32
  vite:time 7ms   Users/david/repos/preconstruct-repro/packages/a/dist/myrepo-a.esm.js +22ms

[dbismut]

I just tried with Vite 2.1.0 and the issue persists.

[Madd0g]

I have the same problem with sveltekit - I opened an issue in sveltekit, but I'll copy the main parts here:

Describe the bug
I want to be able to develop some code that can be used by more than one website. So I want the contents of /routes to be populated with some real files but symlinked folders too.

I try to symlink a local folder into /routes/p and access a markdown file from that folder:

Logs
I get this error:
Cannot find module 'svelte/internal' from '<my-project>/src/routes/p'

To Reproduce
I'm using a symlink on mac to link a folder into /routes/p

ln -s ~/path/to/markdown/folder ./src/routes/p

I'm using a very simple mdsvex config

/** @type {import('@sveltejs/kit').Config} */
const config = {
	extensions: [".svelte", ...mdsvexConfig.extensions],
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: [
		preprocess({
			postcss: true,
		}),
		mdsvex(mdsvexConfig),

	],
	kit: {
		vite: {
                     ......

Expected behavior
There should be a way to configure preserveSymlinks. I dug into the vite code and it looks like this is hardcoded to false unless running from pnp or something?

If I hardcode it to true instead of false, my code works.

vite/packages/vite/src/node/utils.ts

Lines 36 to 50 in 8b5a6a8

	export let isRunningWithYarnPnp: boolean
	try {
	isRunningWithYarnPnp = Boolean(require('pnpapi'))
	} catch {}
	const ssrExtensions = ['.js', '.json', '.node']
	export function resolveFrom(id: string, basedir: string, ssr = false): string {
	return resolve.sync(id, {
	basedir,
	extensions: ssr ? ssrExtensions : DEFAULT_EXTENSIONS,
	// necessary to work with pnpm
	preserveSymlinks: isRunningWithYarnPnp || false
	})
	}

Additional context
I commented on mdsvex issues looking for an alternative solution to my problem.

[mgerring]

I'm also having this issue -- I'm using yalc to develop some app dependencies locally. Those dependencies compile to CommonJS modules. I added the dependencies to optimizeDeps since they're found outside of the node_modules folder, and when I do, I get the following error:

Error: Build failed with 1 error:
dep:@genability_api:1:23: error: Could not resolve ".yalc/@genability/api/dist/index.js" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)```

[dreitzner]

It would be nice to just have it exposed through the config.

Ran into the same issue with shared code for an admin interface inside of svelte-kit. (like @Madd0g )

[dreitzner]

@dbismut @Madd0g , I published a workaround. With it I fake a pnpapi package.

Have fun 😉

https://www.npmjs.com/package/@d.reitzner/vite-pnpapi-workaround

[benmccann]

#4708 was just merged, which should fix this