Issue with absolute imports in react application with bootsraped project

[Vikmanatus]

Describe the bug

There is an issue with the way absolute imports are handled in project bootstraped with create-react-app version 5.0.1 I configured correctly the absolute imports according to the CRA docs. Some of the absolute imports works, some of them don't

For example I am able to do an absolute import on a type, but the application crashes when I make an absolute import on a function.

I have created a reproducible demo of the issue available on this link

Did you try recovering your dependencies?

Yes I have tried all of the solutions proposed absove

The output of yarn --version is 1.22.19

Which terms did you search for in User Guide?

The issue is not documented in the troubleshoot section

I have found a list of similar issues:

• https://stackoverflow.com/questions/68416916/create-react-app-absolute-imports-dont-work-with-yarn-v2-workspaces-typescrip
• https://github.com/facebook/create-react-app/issues/11976
• https://stackoverflow.com/questions/72132090/absolute-imports-issue-in-react-with-typescript
• https://stackoverflow.com/questions/72017719/absolute-imports-arent-working-in-reactjs
• https://stackoverflow.com/questions/73370209/absolute-path-not-working-for-create-react-app-with-typescript

I have tried every solution suggested in another repo, but it didn't fix the issue

Environment

current version of create-react-app: 5.0.1 running from /Users/vikmanatus/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System: OS: macOS 12.3 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 18.7.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.2 - /opt/homebrew/bin/npm Browsers: Chrome: 105.0.5195.125 Edge: Not Found Firefox: Not Found Safari: 15.4 npmPackages: react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 react-scripts: 5.0.1 => 5.0.1 npmGlobalPackages: create-react-app: Not Found

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' in '/Users/someUser/Desktop/SomeFolder/reactjs-absolute-imports-issue/src'

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

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

Actual 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'

Reproducible demo

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

Clone the repository of the reproducible demo 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' in '/Users/someUser/Desktop/SomeFolder/reactjs-absolute-imports-issue/src'

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