Ignite Issues with Babel-Module-Resolver

[OfficialDarkComet]

I'm still fairly new to React-Native, but I've used babel-module-resolver with other projects without issue (all using Expo). It essentially makes "shortcuts" for module imports that can be used by any file in your project, meaning "../../components/" becomes "@components/".

Unfortunately, I am unable to get it to work with projects created using Ignite. I am using the same config for both babel and typscript as I did for my other projects, but none of the "shortcuts" are working. Instead, (I am using VS Code) I get this error...

In the image above, the first line uses babel-module-resolver and the second line does not, both referring to the same button component, but only the first line is giving the error "Cannot find module '@components/button/button' or its corresponding type declarations".

Here is my babel.config.js

and here is my tsconfig.json

I've tried messing with the webpack.config.js file as that wasn't included in my other projects that had babel-module-resolver working without errors. I've tried excluding the "extensions", "root" and "baseUrl' from the babel and ts config files as well. Like I mentioned before, none of the paths are working and all give the same error. And I also tried re-adding babel-module-resolver using yarn (even though it is already included with Ignite's boilerplate).

Anyone have any suggestions on how I can resolve the issue?

Thank you for your time and I appreciate any help that is provided.

- Logan (aka DarkComet)

[jamonholmgren]

I know others have had similar issues in the past. Would like to have some help from the community to diagnose this, as I'd like it to work as well!

[OfficialDarkComet]

Sure! Unfortunately, the error message is not really helpful. However, my first guess is it has to do something with Webpack.

I do have a question that someone may be able to answer, as I'm a bit inexperienced with TypeScript... If Webpack had an error, would it specify Webpack as the source of the problem (like with the projects Webpack config) or would it throw a Typescript error (what it's currently doing)?

When coding a project in React (non-Native and non-Typescript), the IDE would throw an Webpack related error as Webpack is what compiles the project. But in React Native, Webpack is not the primary compiler, and with TypeScript added in the mix that just complicates things.

[jamonholmgren]

FYI, we have a PR in progress that addresses this. #1886