Babel "plugins" is not a valid plugin property?

Question

I am trying to get Nativewind to work on my expo react-native project. But i keep getting the following error: iOS Bundling failed 3618ms (C:\Documents\project\node_modules\expo-router\entry.js) error: app\index.jsx: [BABEL] C:\Documents\project\app\index.jsx: .plugins is not a valid Plugin property

This is my babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"], //The error no longer appears if I comment out this line.
  };
};

And my tailwind.config.js

// tailwind.config.js
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
};

I have tried removing the plugins property, but then nativewind doesnt work. I am following along with the nativewind quick start documentation but haven't seen any mention of this kind of issue.

Answer 1

Seems like nativewind has two separate documentations. One for v2 (default) and one for v4.

With v2 I was encountering this error. But with v4, the setup works

V4 link: https://www.nativewind.dev/v4/overview

Here is my complete setup.

package.json

{
  "name": "habitapp",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "expo": "~50.0.6",
    "expo-status-bar": "~1.11.1",
    "nativewind": "^4.0.1",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-reanimated": "~3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "tailwindcss": "^3.4.1"
  },
  "private": true
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

metro.config.js

const { getDefaultConfig } = require("expo/metro-config")
const { withNativeWind } = require("nativewind/metro")

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: "./global.css" })

babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      "react-native-reanimated/plugin",
      "@babel/plugin-proposal-export-namespace-from",
    ],
  }
}

Hope this helps!