Conflict using absolute path

Describe the bug

I found an example using absolute Import in CRA project. I try following the documentation to add this to my project because i have multiple long relative path and that could help me. And i have a folder base (maybe bad choice ) where i put all my “reusable components” most of them created from ‘styled-components’. And inside this repository i have an index.html which export all component :

// index.js
/* Base Reusable components */
export * from './Box'
export * from './Button'
export * from './Page'
export * from './Tag'
export * from './Icon'
export * from './Text'
export * from './Img'
export * from './BorderedContent'
export { CountrySelect } from './CountrySelect'
export * from './Input'

and if i tried :

import { CountrySelect } from 'base' 

it crash because it try to import from a file in node_modules. but work with

import { CountrySelect } from 'base/CountrySelect' 

Did you try recovering your dependencies?

Don’t seems to be related to dependencies.

❯ yarn --version 1.19.0

Which terms did you search for in User Guide?

I look at absolute imports in CRA documentation and I read a lot of issue post related too but find nothing about conflict

Steps to reproduce

(Write your steps here:)

1. Create a CRA project
2. Create a base folder inside src
3. create jsconfig.json file

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

1. Copy paste following :

// inside base.js 
// box.js
import React from 'react'
const Box = ({text}) => <div>{text}</div>
export { Box }

// index.js
export { Box } from './box'

// update App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Box} from 'base'

function App() {
  return (
    <div className="App">
     <Box text='hello' /> 
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Expected behavior

I expect to be able to import the same way i do with relative path. That mean that if i have a folder base with index.js i expect to be able to import directly from base instead of requiring each file inside the folder

Actual behavior

It’s not possible to import from base or base/index. The only import working is to import directly from base/box which can be really annoying if you need to import from 5/6 different files inside base

when importing from base or base/index

Workaround (Maybe)

Using a baseUrl as . and try import src/base instead as it should resolve the name conflict

Reproducible demo

I’m sorry i can’t provide a demo. Try to put it on CodeSandbox but can’t create jsconfig.json

[rovansteen]

I don’t know if we will add support for aliases anytime soon. I personally don’t have time to work on it right now. I think the current options with setting the baseUrl to . or src is sufficient for tackling the struggles with relative imports. Beyond that it’s just personal preference like using @ instead of src as prefix.

[LoiKos]

Okay. i’ll stay with baseUrl so. Thanks for your answers and your time.