Cannot read properties of undefined (reading ‘transformFile’)

Error Cannot read properties of undefined (reading ‘transformFile’)

Related Error –

1. Error Cannot read properties of undefined (reading ‘transformFile’)
2. Error:03000086:digital envelope routines::initialization error
3. Library: ‘digital envelope routines’,
4. Code: ‘ERR_OSSL_EVP_UNSUPPORTED’
5. Error: error:0308010C:digital envelope routines::unsupported

The error “Cannot read properties of undefined (reading ‘transformFile’)” commonly arises in React Native applications due to misconfigurations or problems with the Metro bundler or the React Native CLI. This error indicates that a module or plugin necessary for transforming files, such as Babel or a custom transformer, is not correctly set up or missing.

To troubleshoot and resolve this issue, follow these steps:

1 Clear Metro Bundler Cache: Clearing the Metro bundler cache can often resolve issues with missing or corrupted transformation plugins. Run the following command in your project directory:

npx react-native start --reset-cache

2. Update Dependencies: Make sure all dependencies, including React Native and related packages, are up-to-date. Run the following command to update dependencies:

npm install

3. Check Babel Configuration: Verify that any custom Babel configuration is correctly set up and does not contain errors. Ensure that required Babel plugins are properly installed and configured.

4. Check Metro Configuration: If you have a custom Metro configuration (e.g., metro.config.js), ensure it is correctly configured and does not conflict with your project setup.

5. Check Node.js Version: Ensure you are using a supported version of Node.js. Refer to the React Native documentation for the recommended Node.js version for your React Native version.

6. Check React Native CLI: If you recently updated React Native or related packages, make sure the React Native CLI is up-to-date. You can update the CLI using:

npm install -g react-native-cli

If none of the above fixed the issue. Please try bellow step

To solve the TypeError: Cannot read properties of undefined (reading ‘transformFile’):

1. Update your react-native version to the latest.
2. Set the NODE_OPTIONS environment variable to --openssl-legacy-provider.
3. Alternatively, downgrade your Node.js version to 16.13.0.

1. Upgrade your react-native version

Open your terminal in your project’s root directory and run the following command to upgrade react-native.

npx react-native upgrade

If the issue persists after upgrading react-native, set the NODE_OPTIONS environment variable to --openssl-legacy-provider.

2. Set the NODE_OPTIONS environment variable

Open your terminal and run the specific command for your shell type.

#  for macOS, Linux or Windows Git Bash
export NODE_OPTIONS=--openssl-legacy-provider

# ----------------------------------------------------

#  for Windows CMD (Command Prompt)
set NODE_OPTIONS=--openssl-legacy-provider

# ----------------------------------------------------

#  for Windows PowerShell
$env:NODE_OPTIONS="--openssl-legacy-provider"

# ----------------------------------------------------

#  for Docker (in your Dockerfile)
ENV NODE_OPTIONS="--openssl-legacy-provider"

3. Downgrade to Node.js version 16

You can issue the following command to downgrade your Node.js version to 16.13.0 if you use NVM.

nvm install 16

nvm use 16

If you still get the error after downgrading to Node version 16, try to delete your node_modules and package-lock.json rerun the npm install command and restart your development server.

#   (Windows) delete node_modules and package-lock.json
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

#   (macOS/Linux) delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

#  clean npm cache
npm cache clean --force

npm install

Thanks for reading