Brand new hydrogen project issue with VITE import of Tailwindcss v4

Question

Brand new hydrogen project issue with VITE import of Tailwindcss v4

IngoVals opened this issue 4 months ago · 2 comments

IngoVals commented 4 months 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';

Answer 1 · 2024-09-23T11:52:31.000Z

Issue seems to be related to PNPM.

Tried

rm -rf node_modules/
npm i

And did not have the same issues

Answer 2 · 2024-09-23T14:00:55.000Z

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.