Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade tool can't resolve paths on Windows #15220

Closed
Fedox-die-Ente opened this issue Nov 28, 2024 · 31 comments · Fixed by #15927
Closed

Upgrade tool can't resolve paths on Windows #15220

Fedox-die-Ente opened this issue Nov 28, 2024 · 31 comments · Fixed by #15927
Labels

Comments

@Fedox-die-Ente
Copy link

What version of Tailwind CSS are you using?

For example: v3.4.15

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss-cli 8.4.41, Vite 5.4.8, autoprefixer 10.4.20

What version of Node.js are you using?

For example: v20.15.0

What browser are you using?

For example: ARC

What operating system are you using?

For example: Windows

Reproduction URL

Execute the npx @tailwindcss/upgrade@next command

Describe your issue

After im trying to execute the command, i get this error:

≈ tailwindcss v4.0.0-beta.3

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `.\tailwind.config.js` to `.\src\globals.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Could not load the configuration file: Can't resolve '././E:\IT\javascript\nativetranslate-vite\tailwind.config.js' in 'C:\Users\redacted\AppData\Local\npm-cache\_npx\0044b4041b3b52e1\node_modules\@tailwindcss\upgrade\dist' 
@Fedox-die-Ente Fedox-die-Ente changed the title [v3 to v4] upgrade tool [v3 to v4] upgrade tool broken? Nov 28, 2024
@philipp-spiess
Copy link
Member

@Fedox-die-Ente Hey! Thanks for the bug report, is it possible for you to include a small reproduction case of your repo that contains just the files necessary to make this crash (e.g. your CSS files)?

@Fedox-die-Ente
Copy link
Author

@Fedox-die-Ente Hey! Thanks for the bug report, is it possible for you to include a small reproduction case of your repo that contains just the files necessary to make this crash (e.g. your CSS files)?

Of course, the entire repository is open source.
https://github.com/NativeTranslate/frontend

Just exclude things that are not necessary. Would otherwise take some time to filter things out now.

@moleium
Copy link

moleium commented Nov 28, 2024

I'm encountering the same issue with very similar error output:

≈ tailwindcss v4.0.0-beta.3

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked `.\tailwind.config.ts` to `.\src\app\globals.css`

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Can't resolve 'tailwind.config.ts' in
│   'C:\Users\redacted\AppData\Local\npm-cache\_npx\0044b4041b3b52e1\node_modules\@tailwindcss\upgrade\dist'

Environment details:

  • Node.js: v22.6.0
  • npm: 10.8.2
  • Tailwind CSS: 3.4.10
  • Next.js: 14.2.5
  • PostCSS: 8.4.41
  • OS: Windows

Relevant configuration files:

@kWAYTV
Copy link

kWAYTV commented Nov 29, 2024

@kWAY ➜  banz-club git(master) pnpx @tailwindcss/upgrade@next
≈ tailwindcss v4.0.0-beta.3

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `.\tailwind.config.ts` to `.\src\app\globals.css`

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Can't resolve '././D:\Data\Bot\banz-club\tailwind.config.ts' in
│   'C:\Users\kWAY\AppData\Local\pnpm-cache\dlx\fzhzqox2n6oztfzuzcyepz73i4\19375ed7a49-2734\node_modules\.pnpm\@[email protected]\node_modules\@tailwindcss\upgrade\dist'

Both pastes expire in 6 days
taiwind.config.ts
globals.css

  • "tailwindcss": "^3.4.15"
  • "next": "15.0.3"
  • "postcss": "^8.4.49"
  • npm: 10.8.3
  • pnpm: 9.12.1
  • Node: 22.9.0
  • Windows

The same happens with npx (npm)

The repo is open sourced here

@Unnoen
Copy link

Unnoen commented Nov 29, 2024

I'm getting the same issue, I was able to overcome it by installing the upgrade package to the project, executing it, then removing it.

yarn add @tailwindcss/upgrade@next
yarn upgrade
yarn remove @tailwindcss/upgrade

I use Yarn but I imagine it'll work for NPM/PNPM.

@kWAYTV
Copy link

kWAYTV commented Nov 29, 2024

I'm getting the same issue, I was able to overcome it by installing the upgrade package to the project, executing it, then removing it.

yarn add @tailwindcss/upgrade@next
yarn upgrade
yarn remove @tailwindcss/upgrade

I use Yarn but I imagine it'll work for NPM/PNPM.

Didn't work for me, i'll wait for an official solution, i guess

@johncarmack1984
Copy link

Having upgrade CLI problems here as well.

venv➜  desktop git:(john/upgrade-to-tailwind-v4) npx @tailwindcss/upgrade@next
≈ tailwindcss v4.0.0-beta.4

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Could not determine configuration file for: `./src/styles.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./node_modules/tailwindcss/base.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./node_modules/tailwindcss/components.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./node_modules/tailwindcss/screens.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./node_modules/tailwindcss/tailwind.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./node_modules/tailwindcss/utilities.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./node_modules/tailwindcss/variants.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and 
│   then run the upgrade tool again. 

Adding

@config "../../tailwind.config.js";

to ./src/styles.css removed that particular warning, but the rest remained; I didn't continue to modify the node_modules files, as that seemed like the kind of thing you'd want Tailwind to handle internally, and is likely the kind of thing a beta is meant to catch.

Love the new APIs, love the improvements to DX since the first Alpha back in April, good luck with the rollout!

@philipp-spiess
Copy link
Member

@johncarmack1984 Your issue seems different from the "could not resolve" path issues so it might be unrelated to this bug report. One quick note here though is that we're looking at the .gitignore file to skip migrating dependencies that we don't need. Any chance your project might not have a .gitignore file or it might not contain the nodes_modules directory?

Regarding the other issue: It looks like something in the path is broken for Windows systems. I'll try to see if I can reproduce this on my Windows machine. @Fedox-die-Ente @moleium are you on x64 or Arm?

@moleium
Copy link

moleium commented Dec 2, 2024

@philipp-spiess I'm on x64 Windows with an Intel i5-6200U CPU.

@Fedox-die-Ente
Copy link
Author

@johncarmack1984 Your issue seems different from the "could not resolve" path issues so it might be unrelated to this bug report. One quick note here though is that we're looking at the .gitignore file to skip migrating dependencies that we don't need. Any chance your project might not have a .gitignore file or it might not contain the nodes_modules directory?

Regarding the other issue: It looks like something in the path is broken for Windows systems. I'll try to see if I can reproduce this on my Windows machine. @Fedox-die-Ente @moleium are you on x64 or Arm?

I work on x64

@moleium
Copy link

moleium commented Dec 2, 2024

The tool is looking for files in the npx cache folder instead of the project folder.
Because when running via npx, the working directory for path resolution becomes the npx cache directory rather than the project directory.

I can confirm that it works with a local install:

❯ npm install @tailwindcss/upgrade@next
❯ npx @tailwindcss/upgrade --force
≈ tailwindcss v4.0.0-beta.4

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked `.\tailwind.config.ts` to `.\src\app\globals.css`

│ Migrating JavaScript configuration files…

│ ↳ Migrated configuration file: `.\tailwind.config.ts`

│ Migrating templates…

│ ↳ Migrated templates for configuration file: `.\tailwind.config.ts`
...

@johncarmack1984
Copy link

@johncarmack1984 Your issue seems different from the "could not resolve" path issues so it might be unrelated to this bug report.

Was going by thread title and didn't feel this necessitated a new report, especially considering others in this thread are also troubleshooting similar issues.

One quick note here though is that we're looking at the .gitignore file to skip migrating dependencies that we don't need. Any chance your project might not have a .gitignore file or it might not contain the nodes_modules directory?

Our project does indeed have a .gitignore, which does indeed include node_modules, but it's stored in the project root of our monorepo, not in the the frontend workspace. This is preferred by our team lead, and works fine with each of our other dependencies. However you're finding .gitignore, make sure you're checking the result of git rev-parse --show-toplevel (aka repo root) and not just the current working directory of the running script.

@barabrian
Copy link

I encountered a similar issue during the upgrade process. This is the error I received:

≈ tailwindcss v4.0.0-beta.4

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./tailwind.config.ts` to `./src/app/globals.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Could not load the configuration file: undefined is not a function 

In my case, the issue was caused by an imported Tailwind CSS plugin in my tailwind.config.ts file. When I temporarily removed the plugin, the migration tool worked as expected.

If you’re using imported plugins, I recommend commenting them out or removing them during the migration process and re-adding them afterward. I hope this helps anyone facing a similar issue!

@philipp-spiess
Copy link
Member

philipp-spiess commented Dec 2, 2024

@barabrian This seems like a different issue as well. Mind finding a new bug report together with a reproduction setup so we can debug this issue? Also what version of Node.js are you running on?

@philipp-spiess philipp-spiess changed the title [v3 to v4] upgrade tool broken? [v3 to v4] upgrade tool can't resolve paths on Windows Dec 2, 2024
@philipp-spiess philipp-spiess changed the title [v3 to v4] upgrade tool can't resolve paths on Windows Upgrade tool can't resolve paths on Windows Dec 2, 2024
@barabrian
Copy link

@philipp-spiess Thank you for the clarification and for renaming the issue to make it more specific. I’m currently running Node.js v22.11.0.

For context, I was using the tailwind-clip-path plugin (from this repository) in my tailwind.config.ts.

@Cierra-Runis
Copy link

Cierra-Runis commented Dec 9, 2024

Facing the same issue here:

PS D:\Desktop\NEW\Modified Desktop\note-of-me.top> yarn dlx @tailwindcss/upgrade@next --force --verbose
➤ YN0000: · Yarn 4.2.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @tailwindcss/upgrade@npm:4.0.0-beta.6, @isaacs/cliui@npm:8.0.2, @isaacs/fs-minipass@npm:4.0.1, and 153 more.
➤ YN0000: └ Completed in 4s 425ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 146 packages were added to the project (+ 70.09 MiB).
➤ YN0000: └ Completed in 0s 253ms
➤ YN0000: ┌ Link step
➤ YN0007: │ tree-sitter@npm:0.22.1 must be built because it never has been before or the last one failed
➤ YN0007: │ tree-sitter-javascript@npm:0.23.1 [b9b98] must be built because it never has been before or the last one failed
➤ YN0007: │ tree-sitter-typescript@npm:0.23.2 [08929] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 749ms
➤ YN0000: · Done in 6s 474ms

≈ tailwindcss v4.0.0-beta.6

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked `.\tailwind.config.ts` to `.\src\styles\globals.css` 

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Can't resolve '././D:\Desktop\NEW\Modified Desktop\note-of-me.top\tailwind.config.ts' in 
'C:\Users\28642\AppData\Local\Temp\xfs-318626fe\dlx-52308\node_modules\@tailwindcss\upgrade\dist'

Then I tried this as below:

PS D:\Desktop\NEW\Modified Desktop\note-of-me.top> yarn add @tailwindcss/upgrade@next
➤ YN0000: · Yarn 4.2.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @tailwindcss/upgrade@npm:4.0.0-beta.6, @sindresorhus/merge-streams@npm:2.3.0, and 28 more.
➤ YN0000: └ Completed in 0s 755ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0060: │ react is listed by your project with version 19.0.0, which doesn't satisfy what @nextui-org/input (pe33c9) and other dependencies request (^18.0.0).
➤ YN0060: │ react-dom is listed by your project with version 19.0.0, which doesn't satisfy what @nextui-org/listbox (pdc377) and other dependencies request (^18.0.0).
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 865ms
➤ YN0000: ┌ Link step
➤ YN0007: │ tree-sitter@npm:0.22.1 must be built because it never has been before or the last one failed
➤ YN0007: │ tree-sitter-javascript@npm:0.23.1 [b9b98] must be built because it never has been before or the last one failed
➤ YN0007: │ tree-sitter-typescript@npm:0.23.2 [08929] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 2s 597ms
➤ YN0000: · Done with warnings in 4s 392ms
PS D:\Desktop\NEW\Modified Desktop\note-of-me.top> yarn upgrade --force --verbose    
≈ tailwindcss v4.0.0-beta.6

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `.\tailwind.config.ts` to `.\src\styles\globals.css` 

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: `addUtilities({ ':root' : … })` defines an invalid utility selector. Utilities must be a 
│   single class name and start with a lowercase letter, eg. `.scrollbar-none`.

I searched all files in node_modules but can't found out where's error.

Just ask if any more info needs.

Note

Edited at 2025-01-25T20:02:50+08:00

There's no issue from Tailwind CSS after this workaround, instead it's from this issue.

@MartinCura
Copy link

@philipp-spiess :

One quick note here though is that we're looking at the .gitignore file to skip migrating dependencies that we don't need. Any chance your project might not have a .gitignore file or it might not contain the nodes_modules directory?

Unrelated to Windows issue but this comment clued me in to why i was getting a similar error to @johncarmack1984. Not sure if you want me to open a new issue for this, but it's simple:

I have a monorepo holding a pnpm workspace with several apps, with a single .gitignore in the root, so the upgrade tool should also be checking there.

I temporarily added a .gitignore to the app i'm trying v4 in, and the upgrade tool ran without problems.

@aiktb
Copy link

aiktb commented Dec 22, 2024

@philipp-spiess :

One quick note here though is that we're looking at the .gitignore file to skip migrating dependencies that we don't need. Any chance your project might not have a .gitignore file or it might not contain the nodes_modules directory?

Unrelated to Windows issue but this comment clued me in to why i was getting a similar error to @johncarmack1984. Not sure if you want me to open a new issue for this, but it's simple:

I have a monorepo holding a pnpm workspace with several apps, with a single .gitignore in the root, so the upgrade tool should also be checking there.

I temporarily added a .gitignore to the app i'm trying v4 in, and the upgrade tool ran without problems.

You are right, but after doing this I got the same error as OP, I use WSL2

@MartinCura
Copy link

You are right, but after doing this I got the same error as OP, I use WSL2

Sorry, it wasn't a fix suggestion for the Windows issue (i'm on Ubuntu rn), but a small different issue.

@Kahera
Copy link

Kahera commented Jan 17, 2025

Just tried to migrate a project and got the same issue, also Windows (11).

$ npx @tailwindcss/upgrade@next
≈ tailwindcss v4.0.0-beta.9

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `.\tailwind.config.js` to `.\src\assets\base.css` 

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Can't resolve '././D:\Repositories\Kahera.github.io\tailwind.config.js' in 'C:\Users\junev\AppData\Local\npm-cache\_npx\0044b4041b3b52e1\node_modules\@tailwindcss\upgrade\dist' 

But installing the tool into the repo as suggested here makes it work as it should. So it does indeed seem to be a problem of running it from the npx cache - it flips the first slashes in the path for the config file.

@azusa5526
Copy link

I encountered the same error when running the upgrade command in the project located at G:\projects. However, after cloning a copy of the project to C:\projects and running the upgrade command again, it completed successfully.

@TigersWay
Copy link

+1 Same problem, but same temporary solution... Good enough for now, but just for now 😄

@kudziajaroslaw98
Copy link

Same issue when i tried to upgrade from v3 to v4

≈ tailwindcss v4.0.0

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked .\tailwind.config.ts to .\src\app\globals.css

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Can't resolve '././D:\GITHUB-PROJECTS\FlashCards\flash-cards\tailwind.config.ts' in
'C:<USER_PATH>\AppData\Local\npm-cache_npx\0044b4041b3b52e1\node_modules@tailwindcss\upgrade\dist'

Environment details:

Node.js: v22.11.0
npm: 10.9.1
Tailwind CSS: 3.4.17
Next.js: 15.1.4
PostCSS: 8.5.1
OS: Windows

@simcolin
Copy link

Same here

$ pnpx @tailwindcss/upgrade
≈ tailwindcss v4.0.0

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `.\tailwind.config.cjs` to `.\src\app.css` 

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Can't resolve '././D:\Projects\perso\tailwind.config.cjs' in
│   'C:\<user_path>\AppData\Local\pnpm-cache\dlx\c1274c7b8f340c6bac85e37c9c2aa3a0ee4dd99e2f083c66b7a9e40343ab7878\19492a54c23-2480\node_modules\.pnpm\@[email protected]\node_modules\@tailwindcss\upgrade\dist'

Env:

node: 22.12.0
npm: 11.0.0
pnpm: 10.0.0
tailwindcss: 3.4.17
postcss: 8.5.1
OS: Windows

@MGeurts
Copy link

MGeurts commented Jan 23, 2025

Same here.

@deeivihh
Copy link

+1

@jscarle
Copy link

jscarle commented Jan 25, 2025

Confirmed. Finds the config, links it to the app.css, but then fails to proceed because it cannot resolve the path.

  • npm install @tailwindcss/upgrade@next
  • [Committed changes]
  • npm upgrade
  • npm remove @tailwindcss/upgrade

Worked for me.

@anOatFlake
Copy link

Thank you, that worked for me too!

philipp-spiess added a commit that referenced this issue Jan 28, 2025
Closes #15220

This PR fixes an issue where the upgrade tool would not be able to load
some JavaScript config files across different drive letters on Windows.

The issue in detail is that `path.relative(…)` tries to build a relative
path but if the file is inside the same folder, it won't start the
relative path with a `./` so we manually appended it in case that it
isn't there. The issue on Windows specifically is that
`file.relative(…)` can also return a legit absolute path, e.g. when the
file is on a different drive. In this case we obviously don't want to
prefix a path with `./`.

## Test plan

To reproduce this issue, I checked out a Tailwind v3 project _on a
different drive letter than my Windows installation_. In that case, I
was adding a repo inside `D:` while `npm` was installed in `C:`. I then
run `npx @tailwindcss/upgrade` to reproduce the issue.

The fix was validated with a local `bun` run of the upgrade tool:


![telegram-cloud-photo-size-4-5818901845756725194-y](https://github.com/user-attachments/assets/d32b21e3-a08d-4608-b65a-93dddc04f890)
@MhL5
Copy link

MhL5 commented Jan 29, 2025

Confirmed. Finds the config, links it to the app.css, but then fails to proceed because it cannot resolve the path.

  • npm install @tailwindcss/upgrade@next
  • [Committed changes]
  • npm upgrade
  • npm remove @tailwindcss/upgrade

Worked for me.

worked for me too tnx 👍

@philipp-spiess
Copy link
Member

Hey folks! Quick update: We've pushed a fix for the path issues on Windows. It'll be in the next patch release that will go out by tomorrow. Thanks for all the infos to help with a repro here.

@Dragate
Copy link

Dragate commented Jan 30, 2025

Bear in mind that the release is not in the next tag, but in the latest. The fix worked like a charm, thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.