Upgraded all my Ionic/Angular app’s packages to their latest versions since I was keeping it in Angular 12 for stability. The time to upgrade has finally come upon us and now I’m getting a export error for most of my pages.
This is the error:
Error: Module not found: Error: Resolving to directories is not possible with the exports field (request was ./)
I found the following threads with similar issues but they both give the same solution of finding/removing trailing backslashes on any imports. I have no backslashes.
Thread 1 found in stack overflow.
Thread 2 found in hackernoon.
I believe the problem I’m facing is a tsconfig + angular package versions error, but none of the combinations I’ve tried have removed the errors. Left the app configured on Angular 13 also assuming its more stable.
Wondering if anyone has seen & solved this problem.
NOTE: I assume my problem also lies in the package version combo since I created a fresh new project that DIDNT display errors but started displaying errors AFTER I added all the old project packages.
Hey there! A lil update here.
I managed to solve this issue by creating a new ionic/capacitor project and remaking all pages, components, models, services & directives. Also, a very important step is to install each node module one by one instead of pasting the package list with old/manually typed versions into the new package.json. I tried this and is possibly one of the reasons that led to my problems.
After racking my brain with those errors this past week this is what I’ve concluded:
An old Angular project like mine, which was remade from an Angular 8 project into an Angular 10 project in 2020 (and now to an Angular 15 project), just can’t keep up with all the node module changes + Angular engine changes IF you don’t keep them regularly updated.
In my case, I kept this project running on Angular 12 because it depended on some ionic-native/cordova stuff that seemed more stable than the capacitor versions (at the time). I’ve slowly been adding capacitor plugins and replacing old ionic-native ones, but since Angular 12 is now deprecated & I did a simple upgrade to Angular 13, 14 & 15 (I tried them all), the engine was going crazy and returning all those errors.
In short, the possible solution is:
Create a new, fresh, modern Ionic/Angular project & readd (with ionic g page, service, component, etc.) all your pages MANUALLY. DONT COPY PASTE THE PAGE DIRECTORIES. After you’ve readded all your pages, components, services, etc. install your node modules, ideally one by one, without legacy peer deps. If you’re using legacy-peer-deps your project is probably on the road to facing my same issue: too many conflicting/old dependency issues that just don’t mix with modern standards. Yes, this is dependency hell.
I hope this helps!