Résolvez le conflit entre NativeWind et React-native-dotenv dans React Native

Question

Je suis nouveau sur React Native, j'utilise Tailwind CSS et j'essaie d'implémenter React-native-dotenv.

J'ai installé NativeWind et Tailwind (car je pense que vous avez besoin des deux) et ils fonctionnaient jusqu'à ce que j'essaye d'implémenter React-native-dotenv.

Le problème survient lorsque je mets à jour babel.config.js vers :

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 };
};

À l'intérieur du plugin...

Si je supprime nativewind/babel, le projet charge expo et fonctionne comme prévu (pas de styles).

Si je supprime "module:react-native-dotenv..., le projet charge expo et fonctionne comme prévu, mais sans la fonctionnalité Dotenv.

Lorsque j'inclus ces deux plugins ensemble dans un fichier babel.config.js, cette erreur s'affiche dans la console :

Uncaught TypeError : nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet n'est pas défini jsunitlessNumbers.js : 76 Pack Web 48 unitlessNumbers.js:76"

J'ai également essayé de séparer les plugins en différents fichiers et de les réimporter dans babel.config.js sans succès.

J'ai utilisé le fichier .babelrc avec .babelrc 文件以及 babel.config.js mais pas de chance non plus.

Answer 1

J'ai déjà été confronté à un problème similaire et l'une des solutions possibles était de ne pas utiliser les fichiers module:react-native-dotenv 插件，您可以尝试使用 babel-plugin-module-resolver 包来解析 的路径.env, .

Vous pouvez le faire dans un fichier babel.config.js :

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

Je vous souhaite bonne chance~