Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Cannot find a local module using TypeScript with React Native

$
0
0

I'm doing a mobile application using React Native (0.61.2) and TypeScript (3.6.4). I'm following advices from this article to have a R namespace, just like how Android does for assets with the generated R class.

I'm trying to use package.json to avoid relative path like this:

import R from '../../../../res/R';

to this:

import R from 'res/R';

My structure:

  res
    package.json
    strings.tsx
    colors.tsx
    palette.tsx
    fonts.tsx
    images.tsx
    R.tsx
    images
      logo.png
  screens
    EmailPassword.tsx

R.tsx:

import strings from './strings';
import images from './images';
import colors from './colors';
import palette from './palette';

const R = {
    strings,
    images,
    colors,
    palette
};

export default R;

Trying to convert my res folder to a module, res/package.json:

{
  "name": "res",
  "version": "0.0.1"
}

When I try to access the R namespace like this:

import R from 'res/R';

I receives the error:

TS2307: Cannot find module 'res/R'

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": [
      "es6"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

I have tried to play a little bit with the settings in tsconfig.json with no luck. Maybe my error is elsewhere?

My goal is to access all my shared resources using the R namespace to avoid relative paths, just like Android does with the R class.

For example: R.colors.something, R.strings.something, R.images.logo, etc..


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>