qwik: [🐞] Path Resolution Issue: '~/' Prefix Not Resolving Modules Properly

Which component is affected?

Qwik Runtime

Describe the bug

I am running npm start for the first time, What i expect is the first renfer of Qwik. What actually happening is

Reproduction

https://github.com/Dv-Joan/qwik-issue-repo.git

Steps to reproduce

Create the Basic app template followed by npm install and finally npm start

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 2.11 GB / 7.85 GB
 Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
 Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.203)
    Internet Explorer: 11.0.19041.1566

Additional Information

Files are there This is my tsconfig.json and i tried this modification but it doesn’t work. I have to use this type of import to work but on all files to make it work

About this issue

Original URL
State: open
Created 10 months ago
Reactions: 1
Comments: 24 (5 by maintainers)

Most upvoted comments

I will look into this issue. First, need to identify if the issue is windows only.

Charlygraphy23 on Oct 4, 2023

@mhevery the problem is easily reproducible on Windows 11 in powershell. The path resolution is superceded by the $HOME variable in Windows 11

OS: Windows 11 Pro
Version: 22H2
OS build: 22621.2215
Processor: Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz   2.30 GHz

node: 20.6.1
npm: 9.8.1
pnpm: 8.7.4

Here is the detailed error log on Windows 11 Powershell

07:31:17 [vite] warning: Parsing error: ESLint was configured to run on `D:\Sources\qwik-app\src\routes\layout.tsx` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
  Plugin: vite-plugin-qwik
  File: D:/Sources/qwik-app/src/routes/layout.tsx:undefined:undefined
Failed to load url ~/components/starter/header/header (resolved id: ~/components/starter/header/header) in D:/Sources/qwik-app/src/routes/layout.tsx. Does the file exist?
Failed to load url ~/components/starter/footer/footer (resolved id: ~/components/starter/footer/footer) in D:/Sources/qwik-app/src/routes/layout.tsx. Does the file exist?
07:31:20 [vite] Error when evaluating SSR module C:/Users/Yoga/Sources/qwik-app/src/routes/layout.tsx: failed to import "~/components/starter/header/header"
|- Error: Cannot find module '~/components/starter/header/header' imported from 'D:/Sources/qwik-app/src/routes/layout.tsx'
    at nodeImport (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55956:25)
    at ssrImport (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55858:30)
    at eval (D:/Sources/qwik-app/src/routes/layout.tsx:11:37)
    at async instantiateModule (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55920:9)

07:31:20 [vite] Internal server error: Cannot find module '~/components/starter/header/header' imported from 'D:/Sources/qwik-app/src/routes/layout.tsx'
  File: /Sources/qwik-app/src/routes/layout.tsx:11:37
      at nodeImport (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55956:25)
      at ssrImport (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55858:30)
      at eval (D:/Sources/qwik-app/src/routes/layout.tsx:11:37)
      at async instantiateModule (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55920:9)
07:32:38 [vite] Internal server error: Cannot find module '~/components/starter/header/header' imported from 'D:/Sources/qwik-app/src/routes/layout.tsx'
  File: /Sources/qwik-app/src/routes/layout.tsx:11:37
      at nodeImport (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55956:25)
      at ssrImport (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55858:30)
      at eval (D:/Sources/qwik-app/src/routes/layout.tsx:11:37)
      at async instantiateModule (file:///D:/Sources/qwik-app/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55920:9) (x2)

The application runs fine on WSL2

sarvex on Sep 14, 2023

@gioboa

I can put in the steps to reproduce the issue, and the issue is not only with Qwik but also with other frameworks that create project files like Astro or Svelte

Create a symlink folder in Windows i.e. something like %USER_PROFILE%\Sources to D:\Sources
Create a new project in %USER_PROFILE%\Sources using the pnpm create Qwik
Run the project

You will see problems like files not found, CSS not loaded, etc…

sarvex on Nov 5, 2023