Error after adding react-native config: Cannot use import statement outside a module

Question

While developing a React-native app I was using process.env to check whether my app was in production or development in my app.config.ts :

import { ExpoConfig, ConfigContext } from 'expo/config';    
import Config from "react-native-config"
const isProd = process.env.NODE_ENV === "production"

console.log("CONFIG", Config.NODE_ENV)

export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
   extra: {
      endpoint: isProd ? "AA" : "BB"
   }
   ...

but i noticed that the process.env its not set when building from Xcode so i tried to add react-native-config in order to use the right .env each time. After installing it with yarn add, adding pod 'react-native-config', :path => '../node_modules/react-native-config' and pod 'react-native-config/Extension', :path => '../node_modules/react-native-config' to podfile and trying to build the app i keep getting the following error:

import { NativeModules } from 'react-native';
^^^^^^

SyntaxError: Cannot use import statement outside a module

@edit I noticed i get the error only when trying to access the Config from app.config.ts during build time, whenever I access it at runtime it works. Now my question is, how should i configure it to make it work also while building, or should i approach it differently?

Pratik Prakash Bindage · Accepted Answer · 2024-04-10 11:29:52Z

0

The error is related to the ES6 module syntax (import/export) statement in the file where you're trying to import NativeModules from 'react-native'.
Configure your project to use the ES6 module syntax throughout. It includes configuring babel to transpile your code and enabling the esModuleInterop option in your babel.config.js file.

Alternatively, you can convert the file with the import statement to use CommonJS syntax (require/module.exports)

# Change this :
import { NativeModules } from 'react-native';

# To this :
const { NativeModules } = require('react-native');

answered Apr 10, 2024 at 11:29

Pratik Prakash Bindage

1,0695 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error after adding react-native config: Cannot use import statement outside a module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related