BABEL Cannot find module 'node:path' error react-native

Viewed 1679

I'm trying to setup tailwindcss-react-native package into my react native project. After successful installation when I add classnames to a component it gives me an error. I've tried uninstalling and then re-installing it, removing the npm cache and node_modules folder but I can't figure out what is wrong. I'm attaching the error log and also codes of my project. Please point out what I'm missing here. Thank you

Screenshot of error log

My babel.config.js file:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["tailwindcss-react-native/babel"],
  };
};

My tailwind.config.js file:

module.exports = {
  content: [
    "./screens/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

My App.js file:

import { TailwindProvider } from 'tailwindcss-react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <TailwindProvider>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </TailwindProvider>
    </NavigationContainer>
    
  );
}

My HomeScreen.js screen:

import { View, Text } from 'react-native'
import React from 'react'

export default function HomeScreen() {
  return (
    <View>
      <Text className="text-red-500">HomeScreen</Text>
    </View>
  )
}

My dependencies & dev dependencies:

"dependencies": {
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-web": "0.17.7",
    "tailwindcss-react-native": "^1.7.10"
  },
  "devDependencies": {
    "@babel/cli": "^7.18.6",
    "@babel/core": "^7.18.6",
    "@babel/node": "^7.18.6",
    "tailwindcss": "^3.1.4"
  },
4 Answers

The way i solved mine was to reinstall my app
Then after it has been installed I removed the package-lock.json and node_modules and reinstalled tailwind-css-react-native and did a the setup in the documentation and it worked.

For everyone who is getting this error, the solution is to update Node at least on 14.18.0.
The tailwindcss-react-native package is trying to access the node:path variable that is available from version 14.18.0`

The problem is your node version... All you need to do is update your node for the latest version, delete package.json node_modules folder, and npm install

All you need do to fix this error is to

  1. install the latest version of Node js.

  2. Install this Babel plugin yarn add @babel/plugin-transform-react-jsx --dev

  3. Add this code to your babel config js "@babel/plugin-transform-react-jsx"

Related