The Vue SFC within node_modules that imports a 3rd party package may have a different path resolution than other imports

[aa900031]

Describe the bug

Scenario

I have written a package called bar which depends on the foo package. bar provides two components, "Wrapper" and "Foo", and is boundle with mkdist.

• Wrapper:
  • Provides an SFC.
  • Uses the "useFoo(name)" function from the foo package, which use provide a name with Symbol('foo').
• Foo:
  • Provides a JS component.
  • Uses the "useFooContext(name)" function from the foo package, which obtains the foo context using inject.
  • Throws an error (Error: Not in the Foo context) if the foo context is not exist.

When bar is imported into a Vite Vue project and Wrapper and Foo are used (see App.vue for reference), the foo context not exist, resulting throw the error Error: Not in the Foo context.

Problem Analysis

Vite's Dependency Pre-Bundling will bundle bar along with foo, and you can see that Symbol("foo") is already included. However, "Wrapper.vue" is not bundled during pre-bundling but is instead imported as an external file.

packages/web/node_modules/.vite/deps/bar.js

// ...

var KEY = Symbol("foo");
function useFooContext() {
  return inject(KEY);
}

var Foo_default = {
  setup() {
    const foo = useFooContext();
    if (!foo)
      throw new Error("Not in the Foo context");
    return () => h("div", `Hi ${foo}`);
  }
};

import { default as default2 } from "/Users/markliang/Developer/reproduce-vite-sfc-node-modules-3rd-party-resolve-issue/node_modules/.pnpm/file+packages+bar+bar-1.0.0.tgz_vue@3.2.47/node_modules/bar/Wrapper.vue";
export {
  Foo_default as Foo,
  default2 as Wrapper
};

// ...

When browser requesting the Wrapper.vue file from the Vite Dev Server, @vue/compiler-sfc is only called to compile it.

However, when using useFoo is directly imported from node_modules/foo, causing Symbol('foo') and the Foo component to be used differently, leading to an error thrown by Foo.

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/@fs/Users/zhong666/Developer/reproduce-vite-sfc-node-modules-3rd-party-resolve-issue/node_modules/.pnpm/file+packages+bar+bar-1.0.0.tgz_vue@3.2.47/node_modules/bar/Wrapper.vue");
import { useFoo } from '/@fs/Users/zhong666/Developer/reproduce-vite-sfc-node-modules-3rd-party-resolve-issue/node_modules/.pnpm/file+packages+foo+foo-1.0.0.tgz_vue@3.2.47/node_modules/foo/index.mjs?v=549e1d7f'

const _sfc_main = {
	setup() {
		useFoo('wrapper')
	}
}

import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/node_modules/.vite/deps/vue.js?v=97bd849d"

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, [
    _renderSlot(_ctx.$slots, "default")
  ]))
}


_sfc_main.__hmrId = "a4b0bd6f"
typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)
import.meta.hot.accept(mod => {
  if (!mod) return
  const { default: updated, _rerender_only } = mod
  if (_rerender_only) {
    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)
  } else {
    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)
  }
})

Reproduction

https://github.com/aa900031/reproduce-vite-sfc-node-modules-3rd-party-resolve-issue

Steps to reproduce

Follow steps:

1. pnpm run bundle
2. pnpm install
3. pnpm dev --force
4. Open the browser http://localhost:5173/, then open DevTools to view the console.

System Info

System:
    OS: macOS 12.6.2
    CPU: (8) arm64 Apple M1
    Memory: 145.53 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/Library/pnpm/node
    npm: 8.19.3 - ~/Library/pnpm/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox Developer Edition: 111.0
    Safari: 16.2

Used Package Manager

pnpm

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.

[sapphi-red]

Duplicate of #3910