admin管理员组

文章数量:1029815

Im currently new to react native and im following up on the docs but while running the npx create-expo-app@latest, i realised that the babel.config.js file is not being created. I have tried looking for a solution to it through the net and docs but i came out empty handed. Anyone have a clue on how to solve this issue?

here is my package.json

{
  "name": "slade",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.6",
    "expo-splash-screen": "~0.29.11",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.3",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.2",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "^3.4.15"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

Im currently new to react native and im following up on the docs but while running the npx create-expo-app@latest, i realised that the babel.config.js file is not being created. I have tried looking for a solution to it through the net and docs but i came out empty handed. Anyone have a clue on how to solve this issue?

here is my package.json

{
  "name": "slade",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.6",
    "expo-splash-screen": "~0.29.11",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.3",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.2",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "^3.4.15"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

  • react-native
  • expo
  • nativewind
Share Improve this question edited Nov 16, 2024 at 8:49 Edens Fallen Leaf asked Nov 16, 2024 at 8:42 Edens Fallen LeafEdens Fallen Leaf 291 silver badge5 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 8

If your project requires a custom Babel configuration, you need to create the babel.config.js file in your project by following the steps below:

  1. Navigate to the root of your project, run the following command inside a terminal

npx expo customize

  1. This command prompts generating different config files. Select babel.config.js.

  2. The babel.config.js file is created in the root of your project with the default configuration as shown below:

    module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], }; };

Expo Docs

Why isn’t the babel.config.js file being created when using npx create-expo-app@latest with expo-router?

When using expo-router, the Babel configuration (babel.config.js) is handled internally by Expo and expo-router. Starting with expo-router, this file might not be created by default, as the framework manages most of the configuration automatically to keep the setup lightweight and modern.

However, if you need to customize the Babel configuration (e.g., for plugins or specific presets), you can manually create the file. Here's how:

Solution:

  1. Manually Create the babel.config.js File
    In the root of your project, create a new file named babel.config.js.

  2. Add the Default Configuration
    Copy and paste the following content into the file:

    module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Add any Babel plugins here if needed
    ],
  };
};

  3. Restart Your Project
    Clear the Metro bundler cache and restart your project to apply the changes:

    expo start -c

    The -c flag clears the cache.

This worked perfectly for me, and I was able to customize my Babel setup.

Im currently new to react native and im following up on the docs but while running the npx create-expo-app@latest, i realised that the babel.config.js file is not being created. I have tried looking for a solution to it through the net and docs but i came out empty handed. Anyone have a clue on how to solve this issue?

here is my package.json

{
  "name": "slade",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.6",
    "expo-splash-screen": "~0.29.11",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.3",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.2",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "^3.4.15"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

Im currently new to react native and im following up on the docs but while running the npx create-expo-app@latest, i realised that the babel.config.js file is not being created. I have tried looking for a solution to it through the net and docs but i came out empty handed. Anyone have a clue on how to solve this issue?

here is my package.json

{
  "name": "slade",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "expo": "~52.0.7",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.6",
    "expo-splash-screen": "~0.29.11",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.3",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.2",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.0.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "^3.4.15"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

  • react-native
  • expo
  • nativewind
Share Improve this question edited Nov 16, 2024 at 8:49 Edens Fallen Leaf asked Nov 16, 2024 at 8:42 Edens Fallen LeafEdens Fallen Leaf 291 silver badge5 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 8

If your project requires a custom Babel configuration, you need to create the babel.config.js file in your project by following the steps below:

  1. Navigate to the root of your project, run the following command inside a terminal

npx expo customize

  1. This command prompts generating different config files. Select babel.config.js.

  2. The babel.config.js file is created in the root of your project with the default configuration as shown below:

    module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], }; };

Expo Docs

Why isn’t the babel.config.js file being created when using npx create-expo-app@latest with expo-router?

When using expo-router, the Babel configuration (babel.config.js) is handled internally by Expo and expo-router. Starting with expo-router, this file might not be created by default, as the framework manages most of the configuration automatically to keep the setup lightweight and modern.

However, if you need to customize the Babel configuration (e.g., for plugins or specific presets), you can manually create the file. Here's how:

Solution:

  1. Manually Create the babel.config.js File
    In the root of your project, create a new file named babel.config.js.

  2. Add the Default Configuration
    Copy and paste the following content into the file:

    module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Add any Babel plugins here if needed
    ],
  };
};

  3. Restart Your Project
    Clear the Metro bundler cache and restart your project to apply the changes:

    expo start -c

    The -c flag clears the cache.

This worked perfectly for me, and I was able to customize my Babel setup.

本文标签： expobabelconfigjs file not being created react nativeStack Overflow

版权声明：本文标题：expo - babel.config.js file not being created react native - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745662613a2161983.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。