Selesaikan konflik antara NativeWind dan react-native-dotenv dalam React Native

Question

Saya baru menggunakan React Native dan menggunakan CSS Tailwind dan cuba melaksanakan React-native-dotenv.

Saya telah memasang NativeWind dan Tailwind (kerana saya percaya anda memerlukan kedua-duanya) dan ia berfungsi sehingga saya cuba melaksanakan react-native-dotenv.

Masalah berlaku apabila saya mengemas kini babel.config.js kepada:

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

Di dalam pemalam...

Jika saya mengalih keluar nativewind/babel, projek memuatkan ekspo dan berfungsi seperti yang diharapkan (tiada gaya).

Jika saya mengalih keluar "module:react-native-dotenv..., projek memuatkan ekspo dan berfungsi seperti yang diharapkan, tetapi tanpa fungsi Dotenv.

Apabila saya memasukkan kedua-dua pemalam ini bersama-sama dalam fail babel.config.js, ia menunjukkan ralat ini dalam konsol:

Uncaught TypeError: nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet tidak ditakrifkan jsunitlessNumbers.js: 76 Pek web 48 unitlessNumbers.js:76"

Saya juga cuba mengasingkan pemalam ke dalam fail yang berbeza dan mengimportnya semula ke dalam babel.config.js tanpa berjaya.

Saya menggunakan fail .babelrc bersama-sama dengan .babelrc 文件以及 babel.config.js tetapi tidak berjaya juga.

Answer 1

Saya pernah menghadapi masalah yang sama dan salah satu penyelesaian yang mungkin adalah untuk tidak menggunakan module:react-native-dotenv 插件，您可以尝试使用 babel-plugin-module-resolver 包来解析 的路径.env fail, .

Anda boleh melakukan ini dalam babel.config.js fail:

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

Semoga berjaya~