nativewind: Cannot use import statement outside a module (While processing ~/node_modules/nativewind/babel.js)

Bug

OS: linux/Ubuntu-20.04 nativewind: 2.0.11 tailwindcss: 3.3.2 react-native: 0.71.4 typescript: 4.8.4

I am not able to use the platformSelect function inside the tailwind.config.js whenever I try to define some properties based on the platform the react native app crashes. I created the tailwind.config.js at the root of my project directory. Here is my tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        wine: '#8C1D40',
        'wine-dark': require('nativewind').platformSelect({
          android: '#8C1D40',
          ios: '#8C1D10',
          default: '#8C1dd0',
        }),
      },
    },
  },
  plugins: [require('@tailwindcss/container-queries')],
};

I have the src directory at the root which contains all my code. I also added the nativewind plugin in the babel.config.js below is my babel config file code:

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.js', '.json'],
        alias: {
          '@': './src',
          types: './@types',
        },
      },
    ],
    'nativewind/babel',
  ],
};

To Reproduce Steps to reproduce the behavior:

Simply use any native-specific function in the tailwind.config.js theme and save the file.
Use any of the values or properties you defined in the tailwind theme and save.
Reload or restart the React native app
See error

Expected behavior I am should able to use the defined properties in the tailwind theme using platformColor function in my components.

Screenshots This is the screenshot of the emulator: And this is the output of the console after the error:

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 4
Comments: 19

Most upvoted comments

@vinibgoulart you can try to change your import with require()

MJdiop on Dec 2, 2023

I’ve just created an expo typescript project with nativewind and everything works.

App.tsx

app-ts

babel.config

babel-config

package.json

package-json

tailwind.config

tailwind-config

simulator_screenshot_7807FF6E-3A55-4C98-950B-EFFB52B0C7E4

MJdiop on Dec 15, 2023

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

const App = () => {
  const [state] = React.useState(Array(1000).fill(100));
  return (
    <ScrollView className="gap-3">
      {state.map(() => (
        <View>
          <Text className="bg-wine-dark">Blah blah blah</Text>
        </View>
      ))}
    </ScrollView>
  );
};

export default App;

Here are the uses of defined value.

dakshlohar1 on Oct 5, 2023