[Bug] Absolute imports with React CRA

[Gallevy]

• I'd be willing to implement a fix

Describe the bug

Absolute imports doesn't work in CRA.
import App from 'folder-in-src/App'

To Reproduce

const path = require(`path`);
const {promises: {writeFile}} = require(`fs`);

await yarn(`dlx`, `create-react-app`, `test`)
process.chdir(path.resolve(process.cwd(), 'test'));

await writeFile("jsconfig.json", `
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}
`)

await writeFile("src/Component1.jsx", `
import React from 'react';

function Component1() {
  return <div>hello world</div>
}

export default Component1;
`)

await writeFile("src/App.jsx", `
import React from 'react';
import Component1 from 'Component1';

function App() {
  return <Component1 />
}

export default App;
`)

await expect(yarn(`build`)).rejects.not.toThrow(
  /Module not found/
);

npx create-react-app test
add a jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

try to use an absolute import (supported in CRA + works fine in yarn1)
import App from 'folder-in-src/App'

You get

./src/App.jsx
Module not found: Something that got detected as your top-level application (because it doesn't 
seem to belong to any package) tried to access a package that is not declared in your dependencies

Works fine with yarn 1

• Windows
• Node version 13.6
• Yarn version 2.0.0-rc27

[orzFly]

What did you do by "try to use an absolute import"?

Maybe you can write a repro in your issue: https://next.yarnpkg.com/advanced/sherlock
(It's up to you to complete the following repro -- I am not sure if it can work)

```js repro
const {promises: {writeFile}} = require(`fs`);

await yarn(`dlx`, `create-react-app`)

await writeFile("jsconfig.json", `
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}
`)

await writeFile("src/App.jsx", `
// demo your "absolute imports"
`)

await expect(yarn(`build`)).rejects.not.toThrow(
  /Module not found/
);
```

[orzFly]

I think it's worth to try

await yarn(`dlx`, `create-react-app`, `.`)

[orzFly]

await yarn(`dlx`, `create-react-app`, `test`)
process.chdir(path.resolve(process.cwd(), 'test'));

(ref: #689 (comment))

[arcanis]

Would be nice to have a Sherlock playground ... not sure how to do that though 🤔

[Gallevy]

Would be nice to have a Sherlock playground ... not sure how to do that though 🤔

I'm really struggling with this sherlock thing here. A playground would be nice. Probably a more detailed documentation could also help.

[arcanis]

Note that you can work on the repro locally - it's a bit faster to iterate:
https://yarnpkg.com/advanced/sherlock#can-i-develop-my-reproduction-offline

[yarnbot]

This issue reproduces on master:

Error: expect(received).rejects.not.toThrow()

Received promise resolved instead of rejected
Resolved to value: "Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.93 KB  build/static/js/2.1f07b838.chunk.js
  770 B     build/static/js/runtime-main.b09effc8.js
  605 B     build/static/js/main.58d0d6e1.chunk.js
  547 B     build/static/css/main.d1b05096.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  \"homepage\" : \"http://myname.github.io/myapp\",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

"
    at expect (/github/workspace/.yarn/cache/expect-npm-24.8.0-8c7640c562-1.zip/node_modules/expect/build/index.js:138:15)
    at module.exports (evalmachine.<anonymous>:37:7)
    at async /github/workspace/.yarn/cache/@arcanis-sherlock-npm-1.0.38-d4f5e2dbf3-1.zip/node_modules/@arcanis/sherlock/lib/executeRepro.js:56:13
    at async executeInTempDirectory (/github/workspace/.yarn/cache/@arcanis-sherlock-npm-1.0.38-d4f5e2dbf3-1.zip/node_modules/@arcanis/sherlock/lib/executeRepro.js:17:16)
    at async Object.executeRepro (/github/workspace/.yarn/cache/@arcanis-sherlock-npm-1.0.38-d4f5e2dbf3-1.zip/node_modules/@arcanis/sherlock/lib/executeRepro.js:24:12)
    at async ExecCommand.execute (/github/workspace/.yarn/cache/@arcanis-sherlock-npm-1.0.38-d4f5e2dbf3-1.zip/node_modules/@arcanis/sherlock/lib/commands/exec.js:25:38)
    at async ExecCommand.validateAndExecute (/github/workspace/.yarn/cache/clipanion-npm-2.0.0-rc.16-b9444aaf89-1.zip/node_modules/clipanion/lib/advanced/Command.js:161:26)
    at async Cli.run (/github/workspace/.yarn/cache/clipanion-npm-2.0.0-rc.16-b9444aaf89-1.zip/node_modules/clipanion/lib/advanced/Cli.js:74:24)
    at async Cli.runExit (/github/workspace/.yarn/cache/clipanion-npm-2.0.0-rc.16-b9444aaf89-1.zip/node_modules/clipanion/lib/advanced/Cli.js:83:28)

[orzFly]

Would be nice to have a Sherlock playground ... not sure how to do that though 🤔

off-topic?: What about something like this CodeSandbox template?

[asoltys]

I just ran into this issue with one of my projects and see this is closed now. Was there a solution found?

[arcanis]

There was no valid reproduction (the last one published was bogus), so hard to say. Open a new issue with a repro if needed.

[asoltys]

Ok, referencing facebook/create-react-app#7996 and https://next.yarnpkg.com/advanced/migration#dont-use-resolvealiasmodules-webpack-or-modulenamemapper-jest for anyone else stumbling here in the meantime