Bug: Issue with absolute imports in react application

React version: 18.2.0

There seems to be an issue with the way that absolute imports are being handled in react 18. Even with a properly configured tsconfig.json, some of the absolute imports works but some of them don’t (see section The expected behavior). For example, I am able to do an absolute import on a type, but the demo crashes when I try to import a function the same way

I have opened this issue because I cannot figure out if the issue is coming from create-react-app or the react official repository.

I have created a reproducible demo available on this link

Steps To Reproduce

Clone the repository of this link and please follow the next steps :

1. Run yarn install
2. Run yarn start

You will see the following error in your browser Module not found: Error: Can’t resolve ‘@/utils’

I have written a small documentation on the README.md of the reproducible issue repo to add some important details

Link to code example:

https://github.com/Vikmanatus/reactjs-absolute-imports-issue

The current behavior

An error is thrown saying that @/utils cannot be resolved

Module not found: Error: Can't resolve '@/utils' in '/Users/someUser/Desktop/SomeFolder/reactjs-absolute-imports-issue/src'

The expected behavior

The import of the makeId function of this repo should work with the following absolute import:

import { makeid } from "@/utils";       // Throws an error

The strange thing is that the compiler throws an error when it imports the function but accepts the absolute import of a type 🤔

import { FakeObjectType } from "@/types";   // No error

[eps1lon]

It’s highly unlikely that something related to resolving imports is caused by react. It’s very likely handled by the framework you’re using when bundling the application. If you’re using Create React App, you should file the issue against facebook/create-react-app instead. I still believe this is a configuration issue that should be solved via support channels and not an issue with the framework since Create React App does have support for absolute paths.

[Vikmanatus]

Thank you very much for your response @eps1lon

My bad, I apologize, I did forgot to paste the output of the error, I have updated the section

I wish this was a configuration issue, but the problem is that some absolute imports works on new projects generated with CRA (e.g.: I am able to import a type with an absolute import) but some of them don’t (e.g.: the import of a function breaks the application). Also I have been able to reproduce it on three new CRA project with the typescript template 🙁

I wasn’t sure on which side I was supposed to create the thread, thank you very much for your answer

I have already opened a stack overflow thread on this subject, I’ll open an issue on create-react-app repository

Thank you very much for your help and have a great day 🙂

Best regards