upgrading from RN 0.72.9 to 0.73.2(or 0.73.5) tsconfig path errors

[Crare]

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

either use the steps below or clone https://github.com/Crare/rn0.73.x_tsxonfig_paths_issue

1. make new react-native app.
2. add components-folder under root.
3. add file under components-folder:

import React from 'react';
import {Text, View} from 'react-native';

export const TestComponent = () => {
  return (
    <View>
      <Text>Hello world</Text>
    </View>
  );
}

4. update App.tsx to return TestComponent in render:

...
import {TestComponent} from 'components/testComponent';
...
function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <TestComponent />
    </SafeAreaView>
  );
}
...

5. add tsconfig with path:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["components/*"]
    }
  }
}

6. run "yarn start" and select device ios or android. or run "yarn android".
7. get error:

error: Error: Unable to resolve module components/testComponent from /Users/username/git/test/AwesomeProject/App.tsx: components/testComponent could not be found within the project or in these directories:
node_modules
../../../node_modules
6 | */
7 |

8 | import {TestComponent} from 'components/testComponent';
| ^
9 | import React from 'react';
10 | import type {PropsWithChildren} from 'react';
11 | import {
at ModuleResolver.resolveDependency (/Users/username/git/test/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
at DependencyGraph.resolveDependency (/Users/username/git/test/AwesomeProject/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
at /Users/username/git/test/AwesomeProject/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Users/username/git/test/AwesomeProject/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Users/username/git/test/AwesomeProject/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 2)
at async visit (/Users/username/git/test/AwesomeProject/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 0)
at async buildSubgraph (/Users/username/git/test/AwesomeProject/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)

[luutruong]

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]

[Crare]

happens too when upgrading to 0.73.5

[Crare]

added reproducible steps.

[Crare]

issue fixed with solution in react-native repo. closing this one too.

[luutruong]

Still same in RN 0.73.6 @Crare . What is your config?

[Crare]

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.

[luutruong]

https://classic.yarnpkg.com/lang/en/docs/workspaces/

It works now but it need run yarn command after we set workspaces.

[kostas64]

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?