React Native - NativeWind and react-native-dotenv conflict

Question

I am new to React Native and am using Tailwind CSS and trying to implement react-native-dotenv.

I have installed NativeWind and Tailwind (as I believe you need both), which has been working up until I tried to implement react-native-dotenv.

The problem occurs when I update my babel.config.js to the following:

module.exports = function (api) {
  api.cache(true);

  const presets = ["babel-preset-expo"];
  const plugins = [
    "nativewind/babel",
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
      },
    ],
  ];
  return { presets, plugins };
};

Within the plugins...

If I remove nativewind/babel, the project loads with expo and works as intended (with no styling).

If I remove "module:react-native-dotenv..., the project loads with expo and works as intended with styling but no Dotenv functionality.

When I include BOTH of the plugins together in the babel.config.js file, it shows this error in the console:

Uncaught TypeError: nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet is undefined js unitlessNumbers.js:76 Webpack 48 unitlessNumbers.js:76"

I've also tried to separate the plugins into different files and re-import them into babel.config.js with no luck.

I have used a .babelrc file along with babel.config.js with no luck either.

Answer 1

I used to have similar problem, one of the possible solution is instead of using the module:react-native-dotenv plugin, you could try to use the babel-plugin-module-resolver package to resolve the path to the .env file, .

You can do this in your babel.config.js file:

return {
    presets: ["babel-preset-expo"],
    plugins: [
      "nativewind/babel",
      [
        "module-resolver",
        {
          alias: {
            "@env": "./.env",
          },
        },
      ],
    ],
  };

Good luck~