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

React Native with typescript unable to resolve modules

$
0
0

This is embarrassing, but I don't know what else to do. I wanted to port my little React Native project to TypeScript, so I created an empty React Native project with TypeScript template, tweaked tsconfig.json to use custom paths such as @app and I tried to run it. It didn't. And this was yesterday, I did some googling, but those who had the same issue suggested to clean the packager, remove node_modules and reinstall packages all over, for example, this one, so I did, and it didn't work.

These are my steps for reinstalling react-native-cli (at first I thought that the problem is with outdated package, it wasn't):

  • npm uninstall -g react-native-cli
  • yarn global add @react-native-community/cli

Those below I followed already that many times, that I don't remember the exact number:

  • npx react-native init MyApp --template react-native-template-typescript
  • yarn add redux redux-logger redux-thunk react-redux
  • yarn add --dev @types/react @types/react-redux @types/redux-logger

And then making changes to tsconfig.json, so it looks likes this ( my changes marked with ->):

{"compilerOptions": {    /* Basic Options */"target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */"module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */"lib": ["dom", "esnext"],                 /* Specify library files to be included in the compilation. */"allowJs": true,                          /* Allow javascript files to be compiled. */"jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */"noEmit": true,                           /* Do not emit outputs. */"incremental": true,                      /* Enable incremental compilation */"isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */    /* Strict Type-Checking Options */"strict": true,                           /* Enable all strict type-checking options. */    /* Module Resolution Options */"moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */->  "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */->  "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */->    "@app/*": ["./*"]->  },"allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */"esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */      },"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"  ]}

My project structure looks like this:

MyApp├── ios├── android├── src│├── index.tsx│├── constants││└── app.json│├── support   ││└── store.tsx   │└── reducers   │└── index.tsx├── tsconfig.json├── package.json├── index.js └── [ the rest ]

And when I'm trying to import {initStore} from '@app/support/store' in MyApp/src/index.tsx the Metro gives me the following:

Loading dependency graph, done.error: bundling failed: Error: Unable to resolve module `@app/support/store` from `src/index.tsx`: @app/support/store could not be found within the project.

Then I tried cleaning with following commands, but it also didn't do any good:

  • watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

But, what interesting, after that I tweaked tsconfig.json, Atom doesn't complain about paths like @app/support/store, it even provides autocompletion, it recognizes @app/support/ as directory and @app/support/store as a script, so I assume tsconfig.json is not the problem.


Viewing all articles
Browse latest Browse all 6287

Trending Articles