search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.44k stars 273 forks source link

Brand new hydrogen project issue with VITE import of Tailwindcss v4 #2557

Open IngoVals opened 1 month ago

IngoVals commented 1 month ago

What is the location of your example repository?

https://github.com/IngoVals/drangey

EDIT: Repo is now private, if needed I can create a new one from that commit, just @ me.

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.7

What version of Remix are you using?

2.12.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2)

Steps to Reproduce

Fetch repo, need to have PNPM, possibly any package manager has same error, not checked.

pnpm i
pnpm shopify hydrogen link
pnpm dev

Route to localhost:3000

All seems fine but error reported in console.

Unable to resolve `@import "tailwindcss"` from /home/ingovals/projects/drangey/app/styles
10:11:43 AM [vite] Internal server error: [postcss] ENOENT: no such file or directory, open 'tailwindcss'
  Plugin: vite:css
  File: /home/ingovals/projects/drangey/app/styles/tailwind.css?direct:undefined:NaN
      at async open (node:internal/fs/promises:639:25)
      at async Object.readFile (node:internal/fs/promises:1242:14)
      at async Object.load (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36797:25)
      at async loadImportContent (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:844:19)
      at async Promise.all (index 0)
      at async resolveImportId (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:800:27)
      at async parseStyles$1 (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:708:5)
      at async Object.Once (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:965:22)
      at async LazyResult.runAsync (/home/ingovals/projects/drangey/node_modules/.pnpm/postcss@8.4.47/node_modules/postcss/lib/lazy-result.js:261:11)
      at async compileCSS (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36860:21)
      at async TransformPluginContext.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36141:11)
      at async PluginContainer.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:49033:18)
      at async loadAndTransform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:51866:27)
[vite] Internal Server Error
[postcss] ENOENT: no such file or directory, open 'tailwindcss'
    at async open (node:internal/fs/promises:639:25)
    at async Object.readFile (node:internal/fs/promises:1242:14)
    at async Object.load (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36797:25)
    at async loadImportContent (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:844:19)
    at async Promise.all (index 0)
    at async resolveImportId (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:800:27)
    at async parseStyles$1 (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:708:5)
    at async Object.Once (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-CdRA0jgn.js:965:22)
    at async LazyResult.runAsync (/home/ingovals/projects/drangey/node_modules/.pnpm/postcss@8.4.47/node_modules/postcss/lib/lazy-result.js:261:11)
    at async compileCSS (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36860:21)
    at async TransformPluginContext.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:36141:11)
    at async PluginContainer.transform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:49033:18)
    at async loadAndTransform (file:///home/ingovals/projects/drangey/node_modules/.pnpm/vite@5.4.7_@types+node@22.5.5_lightningcss@1.27.0/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:51866:27)

Expected Behavior

Brand new install of Hydrogen, no changes, using tailwind v4 Alpha given in CLI options.

Run project and everything works

Actual Behavior

The tailwind.css file reports error, VITE doesn't seem to be able to resolve @import 'tailwindcss';

IngoVals commented 1 month ago

Issue seems to be related to PNPM.

Tried 

rm -rf node_modules/
npm i

And did not have the same issues

IngoVals commented 1 month ago

It seems to be an issue with missing tailwind@4.0.0-alpha.17 package.

@tailwind/vite does not include it as a peer dependency, but tries to resolve like it is a regular dependency. I'm thinking that since Yarn and NPM hoist all packages up it works, but in the case of PNPM it does not.

Since I think tailwind will probably became a peer dep in a future release anyways the fix here is just to add "tailwindcss": "4.0.0-alpha.17" under devDependencies in the template.