[BUG] Error: Could not resolve module "node:module" in jiti after upgrading to Tailwind v4 in Plasmo

[peguimasid]

Description

After upgrading to Tailwind v4 using npx @tailwindcss/upgrade@next, the Plasmo build fails with the following error:

🔴 ERROR | Build failed. To debug, run plasmo dev --verbose.
🔴 ERROR | Could not resolve module "node:module" from "/Users/guilhermomasid/Documents/trash/plasmo-tailwind/node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/lib/jiti.cjs"

Steps to Reproduce

1. Create a new Plasmo extension with TailwindCSS using:

pnpm create plasmo --with-tailwindcss  

2. Upgrade Tailwind to v4 using:

npx @tailwindcss/upgrade@next 

3. Run the Plasmo dev server:

pnpm dev  

4. The build fails with the above error.

Repository

I have created a repository to reproduce the issue: plasmo-tailwind-v4-bug

• The main branch contains the unmodified Plasmo Tailwind example.
• The feat/tailwind-v4 branch contains the project after the Tailwind v4 upgrade.
• A pull request comparing the changes is available here: PR #1.

Expected Behavior

The project should build successfully after upgrading to Tailwind v4.

Actual Behavior

The build fails with a module resolution error related to jiti@2.4.2.

Environment

• TailwindCSS v4
• Jiti v2.4.2
• Node.js version: v22.13.1
• Package manager: pnpm

Additional Notes

This issue seems related to jiti@2.4.2 and its inability to resolve the node:module package. Any insights or workarounds would be greatly appreciated.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

p dev

> plasmo-tailwind@0.0.1 dev /Users/guilhermomasid/Documents/trash/plasmo-tailwind
> plasmo dev

🟣 Plasmo v0.90.2
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Building for target: chrome-mv3
🔵 INFO   | Loaded environment variables from: []
(node:59554) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
🔴 ERROR  | Build failed. To debug, run plasmo dev --verbose.
🔴 ERROR  | Could not resolve module "node:module" from "/Users/guilhermomasid/Documents/trash/plasmo-tailwind/node\_modules/.pnpm/jiti@2.4.2/node\_modules/jiti/lib/jiti.cjs"

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[thekayshawn]

+1 on this, got a monorepo setup with 4 apps using the same shared design system with tailwind v4, have to make the PR wait until this gets resolved otherwise our extension will break.

[Jemeni11]

Same here ✋

[BalutaAlex]

Probably related to parcel-bundler/parcel#9244. The issue has been fixed in newer parcel versions it seems so we should get forward with updating to a newer parcel version

[shinauri]

Has anyone been able to solve the problem?

[Xheldon]

Has anyone been able to solve the problem?

[ctrhub]

Fixed this issue by downgrading these packages to the following versions:

"dependencies": {
    "plasmo": "0.90.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwind-merge": "2.5.5",
    "tailwindcss-animate": "1.0.7"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
    "@types/chrome": "0.0.258",
    "@types/node": "20.11.5",
    "@types/react": "18.2.48",
    "@types/react-dom": "18.2.18",
    "autoprefixer": "10.4.20",
    "postcss": "8.4.49",
    "prettier": "3.2.4",
    "tailwindcss": "3.4.17",
    "typescript": "5.3.3"
  },

Also created postcss.config.js in the root folder:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And created globals.css in the root folder:

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --background: 0 0% 100%;
  }
  .dark {
    --background: 0 0% 4%;
  }
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply antialiased bg-background text-foreground;
    font-family: var(--font-geist-sans);
  }
}

[peguimasid]

@ctrhub The issue here is specifically related to upgrading Tailwind to version 4. The code you provided is using Tailwind version 3, which currently works fine with Plasmo.