I am currently maintaining an app with following versions:
react-native: 0.64.2
react: 17.0.1
babel-plugin-module-resolver: 4.1.0
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-modules-commonjs": "^7.14.0",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@testing-library/react-native": "^7.2.0",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"customize-cra": "^1.0.0",
"eslint": "7.14.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.22.1",
"husky": "4",
"jest": "26.6.0",
"lint-staged": "^11.0.0",
"metro-react-native-babel-preset": "^0.64.0",
"mockdate": "^3.0.5",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.3.0",
"react-app-rewired": "^2.1.8",
"react-scripts": "^4.0.3",
"react-test-renderer": "17.0.1",
"redux-mock-store": "^1.5.4",
"shx": "^0.3.3"
}
Now i am trying to update the app to newer react native version
react-native: 0.72.1
react: 18.2.0
babel-plugin-module-resolver: 4.1.0
Here is newer devDependencies
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/plugin-transform-modules-commonjs": "^7.14.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.7",
"@testing-library/react-native": "^7.2.0",
"@tsconfig/react-native": "^3.0.0",
"@types/metro-config": "^0.76.3",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"customize-cra": "^1.0.0",
"eslint": "^8.19.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.27.5",
"husky": "4",
"jest": "^29.2.1",
"lint-staged": "^11.0.0",
"metro-react-native-babel-preset": "0.76.5",
"mockdate": "^3.0.5",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.4.1",
"react-app-rewired": "^2.1.8",
"react-scripts": "^5.0.0",
"react-test-renderer": "18.2.0",
"redux-mock-store": "^1.5.4",
"shx": "^0.3.3",
"typescript": "4.8.4",
"url-loader": "^4.1.1"
},
and this is babel.config.js file
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
cwd: 'babelrc',
root: ['./src'],
extensions: ['.js', '.ios.js', '.android.js'],
alias: {
assets: './src/assets',
'components/elements': './src/components/elements',
'components/widgets': './src/components/widgets',
'components/layouts': './src/components/layouts',
'screens/generic': './src/screens/generic',
'screens/sales': './src/screens/sales',
'screens/tourPlan': './src/screens/tour-plan',
'screens/directory': './src/screens/directory',
'screens/home': './src/screens/home',
'screens/settings': './src/screens/settings',
screens: './src/screens',
navigations: './src/navigations',
services: './src/services',
themes: './src/themes',
utils: './src/utils',
common: './src/common',
database: './src/database',
helper: './src/helper',
reducers: './src/store/reducers',
sagas: './src/store/sagas',
selectors: './src/store/selectors',
states: './src/store/states',
locale: './src/locale',
'screen/eDetailing': './src/screens/directory/e-detailing',
data: './src/data',
notifications: './src/notifications',
cms: './src/cms',
api: './src/api',
},
},
],
'@babel/plugin-proposal-export-namespace-from',
],
};
in the database/index.js file it is exported like this
export {Operations, Helper, Schemas, Constants, Sync, Offline};
and this is database/sync/index.js file
import * as SyncService from './services';
import * as SyncAction from './actions';
import * as SyncOperation from './operations';
import {getSyncTaskList} from './commonSyncMethods';
export {SyncService, SyncAction, SyncOperation, getSyncTaskList};
and i am using this in my app.js file like this
import {Sync} from 'database';
Sync.SyncService.syncNow();
so, on older version of react-native it was working fine but since i am trying to update to the newer version of react-native i am getting error for this import
‘Sync is undefined’
Now if i have to use this then i have to implement it this way
import {syncNow} from 'database/sync/services';
syncNow();
so all the imports i need to change again for the newer version, not able to understand why it is working on older version and not on newer version. There is no as such changelog mentioned on the repo.
I have also tried to update the ‘babel-plugin-module-resolver’ to the latest version 5.0.2 but same result.