berry: [Bug] Absolute imports with React CRA

  • 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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 19 (7 by maintainers)

Most upvoted comments

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

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

(ref: https://github.com/yarnpkg/berry/issues/689#issue-549324764)

I think it’s worth to try

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