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) and they were working until I tried to implement react-native-dotenv.
The problem occurs when I update 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 };
};
Inside the plug-in...
If I remove nativewind/babel, the project loads expo and works as expected (no styles).
If I remove "module:react-native-dotenv..., the project loads expo and works as expected, but without the Dotenv functionality.
When I include these two plugins together in the babel.config.js file, it shows this error in the console:
Uncaught TypeError: nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet is not defined jsunitlessNumbers.js: 76 Webpack 48 unitlessNumbers.js:76"
I also tried separating the plugins into different files and re-importing them into babel.config.js without success.
I used the .babelrc file as well as the babel.config.js but no luck either.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I once encountered a similar problem, one of the possible solutions is not to use the
module:react-native-dotenvplugin, you can try to usebabel-plugin-module-resolverPackage to parsepaths to .envfiles, .You can do this in the
babel.config.jsfile:return { presets: ["babel-preset-expo"], plugins: [ "nativewind/babel", [ "module-resolver", { alias: { "@env": "./.env", }, }, ], ], };Wish you good luck~