[V4] Windows + Nuxt + Postcss: Pre-transform error: [postcss] Cannot read properties of undefined (reading 'call')

[ManasMadrecha]

What version of Tailwind CSS are you using?

v4.0.0-beta.2

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

• Pnpm
• Nuxt 3.14.159
• Postcss (already pre-installed with Nuxt)
• "@tailwindcss/postcss": ^0.0.0-development.1

What version of Node.js are you using?

20.16.0

What browser are you using?

Edge

What operating system are you using?

Windows 11

Reproduction URL

• Create new Nuxt Module
• Add the following code:

    nuxt.options.postcss = nuxt.options.postcss || {}
    nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {}
    nuxt.options.postcss.plugins['@tailwindcss/postcss'] = {}

Describe your issue

Got this error on using the Nuxt Module in any other Nuxt project:

ERROR  Cannot start nuxt:  Cannot find module '@tailwindcss/oxide-win32-x64-msvc'                                                                    9:29:04 pm  
Require stack:
- C:\Users\manas\dev\saas\node_modules\.pnpm\@[email protected]\node_modules\@tailwindcss\oxide\index.js

The full error is this:

 ERROR  Cannot start nuxt:  Cannot find module '@tailwindcss/oxide-win32-x64-msvc'                                                                    9:29:04 pm  
Require stack:
- C:\Users\manas\dev\saas\node_modules\.pnpm\@[email protected]\node_modules\@tailwindcss\oxide\index.js

  Require stack:
  - C:\Users\manas\dev\saas\node_modules\.pnpm\@[email protected]\node_modules\@tailwindcss\oxide\index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
  at Function.resolve (node:internal/modules/helpers:190:19)
  at jitiResolve (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:187103)
  at jitiRequire (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:189171)
  at C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:199188
  at C:/Users/manas/dev/saas/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/oxide/index.js:72:29
  at eval_evalModule (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:196161)
  at jitiRequire (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:190101)
  at C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:199188
  at C:/Users/manas/dev/saas/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/postcss/dist/index.js:4:14
  at eval_evalModule (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:196161)
  at C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:194388
  at async Function.import (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:199608)
  at async resolveCSSOptions (/C:/Users/manas/dev/saas/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_jsepez3vx4ggrf4cnxinwvuhd4/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.CiB5-vCV.mjs:1143:18)
  at async bundle (/C:/Users/manas/dev/saas/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_jsepez3vx4ggrf4cnxinwvuhd4/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.CiB5-vCV.mjs:1633:14)
  at async bundle (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_@cloudflare+worker_4wjgm7q6bj6jil5jtyuxhgj75y/node_modules/nuxt/dist/index.mjs:6076:5)
  at async build (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_@cloudflare+worker_4wjgm7q6bj6jil5jtyuxhgj75y/node_modules/nuxt/dist/index.mjs:5951:3)
  at async Promise.all (index 1)
  at async NuxtDevServer._load (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev2.mjs:1939:5)
  at async NuxtDevServer.load (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev2.mjs:1828:7)
  at async NuxtDevServer.init (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev2.mjs:1823:5)
  at async Object.run (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev-child.mjs:104:5)
  at async runCommand$1 (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1648:16)
  at async runCommand$1 (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1639:11)
  at async runMain$1 (/C:/Users/manas/dev/saas/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.bd0a2fa0.mjs:1777:7)

[ManasMadrecha]

Manually installed "@tailwindcss/oxide-win32-x64-msvc": "^0.0.0-insiders.8fb9ae8f" in the package.json and now got this error:

[9:42:22 pm]  ERROR  Cannot start nuxt:  Cannot find module 'C:\Users\manas\dev\saas\node_modules\.pnpm\node_modules\@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node'. Please verify that the package.json has a valid "main" entry

  at tryPackage (node:internal/modules/cjs/loader:445:19)
  at Module._findPath (node:internal/modules/cjs/loader:716:18)
  at Module._resolveFilename (node:internal/modules/cjs/loader:1131:27)
  at Function.resolve (node:internal/modules/helpers:190:19)
  at jitiResolve (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:187103)
  at jitiRequire (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:189171)
  at C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:199188
  at C:/Users/manas/dev/saas/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/oxide/index.js:72:29
  at eval_evalModule (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:196161)
  at jitiRequire (C:\Users\manas\dev\saas\node_modules\.pnpm\j[email protected]\node_modules\jiti\dist\jiti.cjs:1:190101)

[ManasMadrecha]

Removed the "@tailwindcss/oxide-win32-x64-msvc": "^0.0.0-insiders.8fb9ae8f" and manually installed the "@tailwindcss/cli": ^4.0.0-beta.2.

Now getting the following error:

ERROR  Pre-transform error: [postcss] Cannot read properties of undefined (reading 'call')

In the node modules, saw that the @tailwindcss/postcss uses require syntax (not import). Is this the issue?

[ManasMadrecha]

Instead of adding Tailwind postcss plugin in own Nuxt Module, added this plugin in brand new nuxt app:

//nuxt.config.ts

export default defineNuxtConfig({
  // modules: [['../src/module', {}]],
  devtools: { enabled: true },
  compatibilityDate: '2024-11-21',
  css: ['~/assets/styles/tw.css'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
    },
  },
})

// assets/styles/tw.css

@import "tailwindcss";

Still got the same error:

✔ Vite client built in 375ms                                                                                                                        10:12:00 pm
✔ Vite server built in 2214ms                                                                                                                       10:12:02 pm

 ERROR  Pre-transform error: [postcss] Cannot read properties of undefined (reading 'call')                                                          10:12:02 pm  

✔ Nuxt Nitro server built in 2970 ms                                                                                                          nitro 10:12:05 pm
ℹ Vite client warmed up in 1ms                                                                                                                      10:12:05 pm   

 ERROR  (node:136) Warning: Label 'Tailwind CSS' already exists for console.time()                                                                   10:12:06 pm  
(Use node --trace-warnings ... to show where the warning was created)


 ERROR  (node:136) Warning: Label 'Resolve project' already exists for console.time() 

As mentioned above, the issue lies in the @tailwindcss/postcss plugin, where call is invoked. Most probably, _oxide.resolveProject is undefined here.

[adamwathan]

Hey! Can you please provide a reproduction? An actual public repo we can clone to troubleshoot makes it much faster for us to look into it vs. trying to recreate your setup by hand.

[ManasMadrecha]

We can mark this as solved due to similar reasons as in #15157 (comment)