search

react-native-community / upgrade-support

A central community-backed place to request and give help when upgrading your app.
MIT License
251 stars 2 forks source link

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

Closed Crare closed 3 months ago

Crare commented 5 months ago

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

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 (

Hello world

); }

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 (

); } ...

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 commented 5 months ago

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 react-native@0.72.x

Crare commented 4 months ago

happens too when upgrading to 0.73.5

Crare commented 4 months ago

added reproducible steps.

Crare commented 3 months ago

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

luutruong commented 3 months ago

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

Crare commented 3 months ago

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 commented 3 months ago

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

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

kostas64 commented 3 weeks ago

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?