Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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"
  },
like image 531
Jyotishmoy Avatar asked Aug 27 '26 15:08

Jyotishmoy


2 Answers

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

like image 126
Wallace Martins Vieira Avatar answered Aug 29 '26 06:08

Wallace Martins Vieira


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`

like image 36
Shifenis Avatar answered Aug 29 '26 04:08

Shifenis



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!