upgrade-support
upgrade-support copied to clipboard
react-native-community
upgrading from RN 0.72.9 to 0.73.2 tsconfig path errors
Environment
npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M1 Max
Memory: 114.58 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.8.1
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 10.1.0
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.10.09.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /Users/<username>/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- visionOS 1.0
- watchOS 10.2
Android SDK:
API Levels:
- "23"
- "24"
- "25"
- "31"
- "33"
- "34"
Build Tools:
- 23.0.3
- 24.0.3
- 26.0.3
- 28.0.3
- 30.0.3
- 31.0.0
- 32.0.0
- 33.0.0
- 33.0.1
- 33.0.2
- 34.0.0
System Images:
- android-23 | ARM 64 v8a
- android-23 | Google APIs ARM 64 v8a
- android-24 | ARM 64 v8a
- android-24 | Google APIs ARM 64 v8a
- android-25 | ARM 64 v8a
- android-25 | Google APIs ARM 64 v8a
- android-26 | ARM 64 v8a
- android-28 | Google ARM64-V8a Play ARM 64 v8a
- android-31 | ARM 64 v8a
- android-31 | Google APIs ARM 64 v8a
- android-31 | Google Play ARM 64 v8a
- android-33 | Google APIs ARM 64 v8a
- android-33 | Google Play ARM 64 v8a
- android-34 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11255304
Xcode:
version: 15.2/15C500b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 2.7.5
path: /Users/<username>/.rvm/rubies/ruby-2.7.5/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.2
wanted: 0.73.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Things I’ve done to figure out my issue
- [x ] I used upgrade-helper to do my upgrade.
Upgrading version
from RN 0.72.9 to 0.73.2
Description
Error:
error: Error: Unable to resolve module components/Common/Icon from /Users/username/git/AppName/App.tsx: >components/Common/Icon could not be found within the project or in these directories: node_modules ../node_modules 11 | import { log, LogType, TerminalColors } from 'utils/loggingHelper'; 12 | import { ToastProvider } from 'react-native-toast-notifications'; 13 | import Icon from 'components/Common/Icon'; | ^
Error in tsconfig probably due to changes in "extends" value there.
extends used to be
"extends": "@tsconfig/react-native/tsconfig.json",
tsconfig:
{
"extends": "@react-native/typescript-config/tsconfig.json",
"include": [
"src",
"types",
"next-env.d.ts",
"./**/*.ts",
"./**/*.tsx"
],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"jsx": "preserve",
"module": "ES6",
"moduleResolution": "node",
"strict": false,
"noImplicitAny": false,
"sourceMap": true,
"target": "es6",
"typeRoots": ["node_modules/@types", "types/types"],
"types": ["node"],
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"components/*": ["components/*"],
"common/*": ["components/Common/*"],
"features/*": ["features/*"],
"configs/*": ["configs/*"],
"api/*": ["api/*"],
"types/*": ["types/*"],
"utils/*": ["utils/*"],
"services/*": ["services/*"],
"hooks/*": ["hooks/*"]
}
},
"lib": ["es2017", "es2016", "es2015", "dom"],
"exclude": ["node_modules"]
}
components-folder and other such are in the root. not under src-folder or such.
Reproducible demo
I have same issues.
{
"extends": "@react-native/typescript-config/tsconfig.json",
"compilerOptions": {
"baseUrl": "./src/",
"paths": {
"app-assets/*": ["assets/*"],
"app-components/*": ["components/*"],
"app-core/*": ["core/*"],
"app-forms/*": ["forms/*"],
"app-screens/*": ["screens/*"],
"app-*": ["*"]
}
}
}
It's work fine with [email protected]
Still same in RN 0.73.6 @Crare . What is your config?
@luutruong you can use workspaces. https://classic.yarnpkg.com/lang/en/docs/workspaces/
I added workspaces to my package.json:
"workspaces": [
"./components",
"./components/common",
"./features",
"./configs",
"./api",
"./types",
"./utils",
"./services",
"./hooks",
"./screens",
"./assets"
],
then include in eact folder a corresponding package.json:
{
"name": "components",
"version": "1.0.0"
}
you can remote the paths and baseUrl from tsconfig.
https://classic.yarnpkg.com/lang/en/docs/workspaces/
It works now but it need run yarn command after we set workspaces.
Still struggling to configure typescript. Im upgrading from 0.72.14 to 0.73.8 Previous typescript version was 4.8.4 and new 5.0.4
this is my tsconfig.json part abouth paths
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@contexts/*": ["src/contexts/*"],
"@services/*": ["src/services/*"],
"@ui/*": ["src/ui/*"],
"@assets/*": ["src/assets/*"],
"@utils/*": ["src/utils/*"],
"@hooks/*": ["src/hooks/*"],
"@queries/*": ["src/queries/*"],
"@locales/*": ["src/locales/*"],
"@themes/*": ["src/themes/*"],
"@navigators/*": ["src/navigators/*"]
}
I created package.json files in each folder inside src folder like this one:
{
"name": "assets",
"version": "1.0.0"
}
I also added workspaces in my package.json like this :
"workspaces": [
"src/components/*",
"src/contexts/*",
"src/services/*",
"src/ui/*",
"src/assets/*",
"src/utils/*",
"src/hooks/*",
"src/queries/*",
"src/locales/*",
"src/themes/*",
"src/navigators/*"
]
I ran yarn in my project root as @luutruong suggested but nothing changed. Still i face the same issue. Any suggestions guys?
