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

Open
Fedox-die-Ente opened this issue Nov 28, 2024 · 17 comments
Open

Upgrade tool can't resolve paths on Windows #15220

Fedox-die-Ente opened this issue Nov 28, 2024 · 17 comments

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

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.

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

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

No branches or pull requests

9 participants