Conflict using absolute path

[LoiKos]

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"]
}

4. 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

[robertvansteen]

You are saying you have an index.html file that exports your components, is that correct or do you mean an index.js file?

[LoiKos]

Update issue with missing jsconfig.json and fix index.html -> index.js

[iRoachie]

Can confirm. Typescript attempts to look for an npm package with that name before resolving to src folder.

I encountered this with a folder called util.

[robertvansteen]

Do you have a directory in your node_modules called base? If so, this is working as intended. Node's resolution mechanism lets node_modules win if there is a conflict. I suggest to rename to a folder that does not share the name with a module or change baseUrl to . so you can explicitly import from src/base.

[iRoachie]

This really isn’t scalable or ideal. Any of your dependencies could have a dependency of their own with a similar name of your folder and everything will break. Don’t think we should be recommend this at all. The tsconfig paths solution or webpack alias is a much better approach

[robertvansteen]

I understand, but that's how node works. That's why we added the option to set baseUrl to . so you can import absolutely by prefixing all your imports with src to make sure it won't conflict with any installed modules.

[LoiKos]

Yes i have a folder inside node modules called base and i already used baseUrl to . as workaround. When i post a comment under #5645 i just wanna give an other reason to add support for paths key in jsconfig. i'll stay with the workaround for now

Just a little question about this : What are you plan for this feature ? i read that you also think about supporting Workspaces (Lerna, Yarn ). Do you plan to provide aliases support or instead you wait Workspaces support ?

[robertvansteen]

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.