Babel.js React Native - NativeWind和react-native-dotenv冲突

xpcnnkqh  于 2023-04-18  发布在  Babel
关注(0)|答案(1)|浏览(185)

我是React Native的新手,正在使用Tailwind CSS并试图实现react-native-dotenv。
我已经安装了NativeWind和Tailwind(我相信你需要两者),直到我尝试实现react-native-dotenv,它们一直在工作。
当我将babel.config.js更新为以下内容时出现问题:

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

在Plugin中…
如果删除nativewind/babel,项目将加载expo并按预期工作(没有样式)。
如果我删除"module:react-native-dotenv...,项目将加载expo并按预期使用样式,但没有Dotenv功能。
当我在babel.config.js文件中包含这两个插件时,它在控制台中显示以下错误:
未捕获的类型错误:nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet未定义js unitlessNumbers.js:76 Webpack 48 unitlessNumbers.js:76”
我也试过将插件分离到不同的文件中,并将它们重新导入到babel.config.js中,但没有成功。
我已经使用了一个.babelrc文件沿着babel.config.js也没有运气。

6rqinv9w

6rqinv9w1#

我曾经有过类似的问题,一个可能的解决方案是,而不是使用module:react-native-dotenv插件,你可以尝试使用babel-plugin-module-resolver包来解析.env文件的路径。
您可以在babel.config.js文件中执行此操作:

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

加油~

相关问题