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

It appears like there could be an issue with how the nativewind/babel plugin is designed in your Expo Respond Local venture.

1. Check Plugin Compatibility: Guarantee that the version of native wind/babel you're utilizing is congruous along with your Expo and Respond Local forms.
2. Upgrade Babel Setup: Attempt overhauling your babel.config.js to expressly indicate the babel- plugin- native wind plugin rather than using native wind/babel. How you'll do it:

// babel.config. js module.exports = work (api) {api.cache(true); return {presets:["babel- preset- expo"],plugins:["babel - plugin - native wind"], // Overhaul this line};};

1.Check Conditions: Make beyond any doubt all conditions, counting babel- plugin- native wind, are correctly introduced and up to date. You'll be able attempt expelling the node_modules registry and reinstalling conditions by running npm introduce or yarn introduce. 2.Expo Compatibility: Affirm that the native wind bundle is consistent with Expo ventures. Now and then, certain libraries or plugins may not be completely congruous with Expo's overseen workflow. 3. Expo Documentation: Check the Expo documentation or community gatherings to see in case there are any known issues or arrangements related to utilizing native wind with Expo ventures. 

Answer 2

Check this for a solution. You have to downgrade nativewind to v2.0.11 because thats the last stable version. Version releases are listed in the nativewind repo.

Answer 3

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!