tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Upgrade tool can't resolve paths on Windows

Open feeeedox opened this issue 1 year ago • 15 comments

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' 

feeeedox avatar Nov 28 '24 05:11 feeeedox

@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)?

philipp-spiess avatar Nov 28 '24 09:11 philipp-spiess

@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.

feeeedox avatar Nov 28 '24 09:11 feeeedox

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:

moleium avatar Nov 28 '24 14:11 moleium

@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

kWAYTV avatar Nov 29 '24 03:11 kWAYTV

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.

Unnoen avatar Nov 29 '24 06:11 Unnoen

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

kWAYTV avatar Nov 29 '24 07:11 kWAYTV

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!

johncarmack1984 avatar Dec 01 '24 21:12 johncarmack1984

@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?

philipp-spiess avatar Dec 02 '24 11:12 philipp-spiess

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

moleium avatar Dec 02 '24 11:12 moleium

@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

feeeedox avatar Dec 02 '24 12:12 feeeedox

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`
...

moleium avatar Dec 02 '24 12:12 moleium

@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.

johncarmack1984 avatar Dec 02 '24 12:12 johncarmack1984

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!

barabrian avatar Dec 02 '24 12:12 barabrian

@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 avatar Dec 02 '24 14:12 philipp-spiess

@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.

barabrian avatar Dec 02 '24 14:12 barabrian

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.

Cierra-Runis avatar Dec 09 '24 16:12 Cierra-Runis

@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.

MartinCura avatar Dec 13 '24 01:12 MartinCura

@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

aiktb avatar Dec 22 '24 14:12 aiktb

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.

MartinCura avatar Dec 22 '24 19:12 MartinCura

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.

Kahera avatar Jan 17 '25 22:01 Kahera

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.

azusa5526 avatar Jan 20 '25 05:01 azusa5526

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

TigersWay avatar Jan 22 '25 02:01 TigersWay

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

kudziajaroslaw98 avatar Jan 23 '25 01:01 kudziajaroslaw98

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

simcolin avatar Jan 23 '25 10:01 simcolin

Same here.

MGeurts avatar Jan 23 '25 11:01 MGeurts

+1

deeivihh avatar Jan 24 '25 10:01 deeivihh

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.

jscarle avatar Jan 25 '25 12:01 jscarle

Thank you, that worked for me too!

anOatFlake avatar Jan 26 '25 10:01 anOatFlake

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 👍

MhL5 avatar Jan 29 '25 16:01 MhL5

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.

philipp-spiess avatar Jan 29 '25 16:01 philipp-spiess