Why don't absolute paths work when importing typescript files into other typescript files but are otherwise ok, in a React Native Project?
Asked Answered
F

0

7

Backstory:

I am gradually converting an existing React Native project to TypeScript. Absolute paths have been working for years based on my babelrc configuration.

Problem:

Since adding TypeScript, absolute paths work only in the following scenarios:

  • importing js files into other js files
  • importing ts files into js files
  • importing js files into ts files

The thing that does not work is:

  • importing ts files into other ts files

It appears to work in VSCode but when I try to build my app, I get the infamous:

{insert file here} could not be found within the project or in these directories: node_modules, etc.

I have spent weeks trying to figure this out. Absolute paths with TypeScript seems to be a challenge a lot of people run into. I've tinkered with my babelrc, tsconfig, eslintrc, and metro.config.js with a myriad of combinations and additions/subtractions. I've installed dependencies, I've tried everything the error suggests(deleting caches, restarting, etc.). I've played with the import statements and scoured the docs until I was black and blue, reinstalled node_modules and pods.

The ONLY thing that has worked(besides relative imports, but ew) is adding a package.json to the folder I am trying to import from like so:

{
  "name": "app"
}

This seems simple enough but I can't accept that this is the only way. And as I convert more and more files, I don't really want to have to keep sprinkling package.jsons everywhere like some overworked typescript fairy :)

I don't want to make this too long so if anyone thinks it would be beneficial to see my config files, I can for sure add them. Especially hoping for an answer referenced by official sources. Super appreciate anyone's help!

Franza answered 2/12, 2022 at 1:18 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.