Error evaluating Node.js code

[sunshmo]

When you rename the globals.css in the app directory to globals.css, the following error message will appear on the screen. Undo the file name change and there will be no error message.

Build Error


Error evaluating Node.js code

./packages/shared-models/app/globals.scss

Error evaluating Node.js code
Error: Expected expression.

How to reproduce the bug.

1. The project was created using npx create-next-app@latest
2. pnpm dlx shadcn@latest init
3. pnpm dlx shadcn@latest add button

Here are some dependency configurations for the project.

{
  "dependencies": {
    "@radix-ui/react-slot": "^1.1.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.483.0",
    "next": "^15.2.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.2",
    "tw-animate-css": "^1.2.4"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "sass-embedded": "^1.86.0",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  sassOptions: {
    implementation: 'sass-embedded'
  }
};

export default nextConfig;

[RobinMalfait]

Hey!

It looks like the CSS file is being imported as a JS file for some reason but I'm pretty sure Tailwind CSS is not doing that.

Setting this up manually, I can use a global.css file with any issues, so there is something else in your setup that is not working.

Can you create a minimal reproduction and link it here so we can take a look?

Side note that Tailwind CSS itself does not work with any type of sass/scss, but I don't think this is the problem here.

[yekta]

I'm having the exact same issue. The only thing I did is upgrading from Tailwind 4.0.9 to 4.1.2.

[jaskarandeogan]

Having same issue. I upgraded my tailwind version to "tailwindcss": "^4.1.2", but getting this issue.

[ftognetto]

Having the same issue. Upgrade tailwind today to 4.1.1.
The strange behavior is that if I downgrade back to 4.0.1 is still giving me the error

[nightmareinc]

I also had the same issue. I was using npm and it was fine initially, but when I switched to pnpm (without upgrading tailwind or related packages explicitly) I encountered this error.
In my case, after at package-lock.json I found @tailwindcss/postcss to be v1.4.1 but when I used pnpm it had installed another minor version that seemed to have caused this (unfortunately after fixing the issue by explicitly upgrading to v1.4.1 I could not get it to install the version that caused the issue). But after upgrading to @tailwindcss/[email protected] the issue was resolved.

these are the version that work together for me:
@tailwindcss/[email protected]
[email protected]
[email protected]

{
  "dependencies": {
    "next": "15.3.1",
    "next-intl": "^4.0.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "postcss": "^8.5.3",
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

[suohongliu-s]

I also had the same issue. I was using npm and it was fine initially, but when I switched to pnpm (without upgrading tailwind or related packages explicitly) I encountered this error. In my case, after at package-lock.json I found @tailwindcss/postcss to be v1.4.1 but when I used pnpm it had installed another minor version that seemed to have caused this (unfortunately after fixing the issue by explicitly upgrading to v1.4.1 I could not get it to install the version that caused the issue). But after upgrading to @tailwindcss/[email protected] the issue was resolved.

these are the version that work together for me: @tailwindcss/[email protected] [email protected] [email protected]

{
  "dependencies": {
    "next": "15.3.1",
    "next-intl": "^4.0.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "postcss": "^8.5.3",
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

You saved my day!

[brtdwchtr]

Running into the same issue... just suddenly appeared without having made changes to either globals.css or anything else from tailwind. Reverting any latest changes doesn't make it work again. Tried upgrading, but I'm already on all latest versions.
When I fully empty globals.css, project builds/runs again.

getting this output from build:
⨯ ./src/app/globals.css.webpack[javascript/auto]!=!../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css
RangeError: Invalid code point 6920039
at Function.fromCodePoint ()
at String.replace ()
Import trace for requested module:
./src/app/globals.css.webpack[javascript/auto]!=!../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css
./src/app/globals.css

[wongjn]

Check if you have some binary or binary-like files in your project that have a file extension that does not appear in this list. If so, try ignoring them. Otherwise, consider providing a git repo that reproduces the unexpected behavior.