Can't resolve types import on windows (Failed to resolve import source "./types")
Jul 13th 2023
Vue version
3.3.4
Link to minimal reproduction
https://github.com/YourDeadEnd/vue3-boilerplate/tree/test-vue3.3-import
Steps to reproduce
npm ci
npm run serve
What is expected?
Project started without errors.
What is actually happening?
Failed to resolve import source "./types".
System Info
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
Memory: 1.53 GB / 15.79 GB
Binaries:
Node: 18.14.1 - C:\Program Files\nodejs\node.EXE
npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.79)
Internet Explorer: 11.0.19041.1566
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
This bug only reproduces on windows systems, due to incorrect path building using path.posix.join.
When function joinPath from 'compiler-sfc/utils' gets windows style path (like C:\\git\\vue3-boilerplate\\src\\components\\TestComponent\\TestComponent.vue), it's return wrong joined path like:
// scope.filename = 'C:\\git\\vue3-boilerplate\\src\\components\\TestComponent\\TestComponent.vue'
// source = './types'
const filename = joinPaths(scope.filename, "..", source);
// filename = 'types'
To get the right path on windows we need to normalize win path:
const nmPath = normalizePath(scope.filename);
const filename = joinPaths(nmPath, "..", source);
// filename = 'C:/git/vue3-boilerplate/src/components/TestComponent/types'
and then the error is gone.
Jul 13th 2023