[postcss] Cannot use 'import.meta' outside a module

[1286857295]

When I attempt to run it, it throws an error.

Error {
  stack: "[postcss] Cannot use 'import.meta' outside a module\n" +
  'at createError (D:/PuYuanhao/project/vpn_client/node_modules/h3/dist/index.mjs:71:15)\n' +
  'at D:/PuYuanhao/project/vpn_client/node_modules/@nuxt/vite-builder/dist/index.mjs:423:21)\n' +
  'at async processMessage (D:/PuYuanhao/project/vpn_client/node_modules/@nuxt/vite-builder/dist/index.mjs:405:30)',
  message: "[postcss] Cannot use 'import.meta' outside a module",
  data: {
    code: 'VITE_ERROR',
    id: '/@fs/D:/PuYuanhao/project/vpn_client/node_modules/@nuxtjs/tailwindcss/node_modules/tailwindcss/tailwind.css',
    stack: 'D:\\PuYuanhao\\project\\vpn_client\\node_modules\\@nuxtjs\\tailwindcss\\node_modules\\@nuxt\\kit\\dist\\index.mjs:2244\n' +
    '  if (!import.meta.dev) {\n' +
    '              ^^^^\n' +
    '\n' +
    "SyntaxError: Cannot use 'import.meta' outside a module\n" +
    '    at new Script (node:vm:117:7)\n' +
    '    at createScript (node:vm:269:10)\n' +
    '    at Object.runInThisContext (node:vm:317:10)\n' +
    '    at evalModule (D:\\PuYuanhao\\project\\vpn_client\\node_modules\\tailwindcss\\node_modules\\jiti\\dist\\jiti.js:1:251724)\n' +
    '    at jiti (D:\\PuYuanhao\\project\\vpn_client\\node_modules\\tailwindcss\\node_modules\\jiti\\dist\\jiti.js:1:249841)\n' +
    '    at D:\\PuYuanhao\\project\\vpn_client\\node_modules\\@nuxtjs\\tailwindcss\\dist\\config.cjs:7:13\n' +
    '    at evalModule (D:\\PuYuanhao\\project\\vpn_client\\node_modules\\tailwindcss\\node_modules\\jiti\\dist\\jiti.js:1:251913)\n' +
    '    at jiti (D:\\PuYuanhao\\project\\vpn_client\\node_modules\\tailwindcss\\node_modules\\jiti\\dist\\jiti.js:1:249841)\n' +
    '    at D:\\PuYuanhao\\project\\vpn_client\\node_modules\\@nuxtjs\\tailwindcss\\dist\\config-ctx.cjs:3:16\n' +
    '    at evalModule (D:\\PuYu'... 90 more characters,
    message: "[postcss] Cannot use 'import.meta' outside a module",
  },
  statusCode: 500,
}

[1286857295]

package.json

{
  "name": "client",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^4.2.1",
    "vue": "^3.5.24",
    "vue-router": "^4.6.3"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.14.0"
  }
}

[error-code]

+1

[hamidovz]

@1286857295 What version of node.js do you use ? you need to use at least version 22.

[1286857295]

@1286857295 What version of node.js do you use ? you need to use at least version 22.

I've upgraded the node.js and it's now resolved. Thank you.

[ojvribeiro]

@hamidovz

@1286857295 What version of node.js do you use ? you need to use at least version 22.

It's happening to me at v22.16.0 as a VSCode warning notification, breaking intellisense when I add this setting to support layers (as seen in the docs).

"tailwindCSS.experimental.configFile": ".nuxt/tailwind/postcss.mjs",

│ ╭── Nuxt project info ─────────────────────────────────────╮
│ │                                                          │
│ │  Operating system      Linux 6.8.0-90-generic            │
│ │  CPU                   Intel(R) Core(TM) i5-10400F CPU   │
│ │  @                                                       │
│ │                        2.90GHz (12 cores)                │
│ │  Node.js version       v22.16.0                          │
│ │  nuxt/cli version      3.31.2                            │
│ │  Package manager       bun 1.3.4                         │
│ │  Nuxt version          3.20.2                            │
│ │  Nitro version         2.12.9                            │
│ │  Builder               vite 7.3.0                        │
│ │  Config                $development, $production, app,   │
│ │                        compatibilityDate, components,    │
│ │                        fonts, future, imports, modules,  │
│ │                        routeRules                        │
│ │  Modules               nuxt-og-image 5.1.13              │
│ │                                                          │
│ ╰──────────────────────────────────────────────────────────╯

[jianongHe]

+1 when using bun

[BilalBudhani]

I was experiencing same issue when using bun as package manager.

After brainstorming with AI, the solution that worked for me was to force postcss plugin to use tailwind.config.js from the project root instead

// nuxt.config.js
...
modules: [
    '@nuxtjs/tailwindcss',
    '@nuxt/image',
    // Override Tailwind PostCSS plugin to use tailwind.config.js (avoids loading generated .mjs that triggers "import.meta outside a module")
    (_options, nuxt) => {
      nuxt.hook('modules:done', () => {
        const path = require('path')
        const root = nuxt.options.rootDir ?? process.cwd()
        const postcssOptions = nuxt.options.postcss ?? (nuxt.options.build as { postcss?: { postcssOptions?: { plugins?: Record<string, unknown> }; plugins?: Record<string, unknown> } }).postcss?.postcssOptions ?? (nuxt.options.build as { postcss?: { plugins?: Record<string, unknown> } }).postcss
        const plugins = postcssOptions?.plugins as Record<string, unknown> | undefined
        if (plugins?.tailwindcss && typeof plugins.tailwindcss === 'string' && plugins.tailwindcss.includes('.nuxt/tailwind/postcss.mjs')) {
          plugins.tailwindcss = path.join(root, 'tailwind.config.js')
        }
      })
    },
  ],
...

hope this helps