fix(compiler-sfc): malformed filename on windows using path.posix.join()

[b12k]

Closes: #8671, #9583

Not fixed with: #9446

Related: #9473

On Windows path.posix is available but path.posix.join() returns malformed result when joining paths containing .. like ../folderOrFile

Error:

where ../base folder contains index.ts with "re-exports" like:

//...
export { default as BaseImage, type BaseImageProps } from './base-image.vue';
//...

Simple reproducible example (on Windows):

Save the following as index.js and run node index.js

const path = require('path');

const fileName = '../fileOrFolder';

console.log({
    join: path.join(__filename, fileName), // ✅ >> C:\\code\\sandbox\\posix-path\\fileOrFolder
    posixJoin: path.posix.join(__filename, fileName), // ❌ >> fileOrFolder
    resolve: path.resolve(__filename, fileName), // ✅ >> C:\\code\\sandbox\\posix-path\\fileOrFolder
    posixResolve: path.posix.resolve(__filename, fileName), // ✅ >> /code/sandbox/posix-path/fileOrFolder
})

Fix forces to use path.join() instead of path.posix.join() on Windows.

[b12k]

@sodatea I recreated this fix and added more details.

Thank you in advance!

FYI: @edison1105

[pikax]

@b12k can you provide an example of this error happening, I've been using windows and haven't noticed this issue.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	86.5 kB	32.9 kB	29.7 kB
vue.global.prod.js	132 kB	49.6 kB	44.5 kB

Usages

Name	Size	Gzip	Brotli
createApp	48 kB	18.9 kB	17.2 kB
createSSRApp	51.2 kB	20.2 kB	18.4 kB
defineCustomElement	50.4 kB	19.7 kB	17.9 kB
overall	61.4 kB	23.7 kB	21.6 kB

[b12k]

resolveType.spec.ts

Test relative ts on Windows does not include condition when file is located in another folder.

I will update the test to illustrate the issue

[haoqunjiang]

joinPaths is also used in minimatch patterns:

core/packages/compiler-sfc/src/script/resolveType.ts

Line 883 in edf2572

included.some(p => isMatch(containingFile, joinPaths(base, p)))

which only accepts forward slashes: https://github.com/isaacs/minimatch#windows
I'm afraid that's what's causing the Windows test failures: https://github.com/vuejs/core/actions/runs/6651662225/job/18074220591?pr=9478

I recommend only modifying the code that resolves the relative path to avoid accidental breakages.

[b12k]

joinPaths is also used in minimatch patterns:

core/packages/compiler-sfc/src/script/resolveType.ts

Line 883 in edf2572

included.some(p => isMatch(containingFile, joinPaths(base, p)))

which only accepts forward slashes: https://github.com/isaacs/minimatch#windows
I'm afraid that's what's causing the Windows test failures: https://github.com/vuejs/core/actions/runs/6651662225/job/18074220591?pr=9478

I recommend only modifying the code that resolves the relative path to avoid accidental breakages.

• Using path.join for Windows in importSourceToScope
• Added respective test

[b12k]

Strange that e2e failed.
It passes locally on Windows and Ubuntu

[b12k]

@sodatea May I please ask you to have a look one more time?

[b12k]

@b12k can you provide an example of this error happening, I've been using windows and haven't noticed this issue.

I created a test case for that
packages/compiler-sfc/tests/compileScript/resolveType.spec.ts

You may reproduce that by adding a test case like in PR and try running unit tests on Windows.

[b12k]

@sodatea I really need this fix =) We can not directly import types/interfaces, and using (redundant file) *.ts import/export workaround.