Create-react-app: Absolute imports do not work when Yarn PnP is enabled

[yohanliyanage]

I created a React App using create-react-app with PnP enabled.

npx create-react-app pnp --use-pnp

Then following the documentation, I created a jsconfig.json file to enable absolute imports.

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

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

When I use absolute imports, the compiler fails to resolve those. Changing the imports to have relative paths work. Just to see whether this is PnP related, I deleted the '.pnp.js' file and removed the relevant config from package.json as well. Then it worked fine. So I assume this is PnP related.

Environment: create-react-app v3.2.0 on Mac OS X Catalina

[hlian]

Can reproduce! Related issue: https://github.com/facebook/create-react-app/issues/7047

I get this error when I run yarn webpack-cli --config webpack.dev.js:

ERROR in ./main.tsx 19:0-30
Module not found: Error: 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

Required package: src (via "src/api")

I'm not using create-react-app, but the setup is similar: I want PnP to realize that TypeScript knows how to resolve these paths.

[hlian]

For people coming from search engines, I think this is the issue to subscribe to: https://github.com/yarnpkg/berry/issues/589

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[yohanliyanage]

@hlian Thanks for the confirmation and sharing the related issue with regards to Typescript. However, I see this issue with regular JavaScript as well. It seems yarnpkg/berry#589 is Typescript specific.

[Gallevy]

Any update on this? main breaking point for upgrade to yarn berry

[nickmccurdy]

Yarn 2/berry already fixed this, you just need to tell it how to resolve each module in src using link: at the beginning of a dependency. https://next.yarnpkg.com/advanced/migration#dont-use-resolvealiasmodules-webpack-or-modulenamemapper-jest

[Felix-Indoing]

This may work in a single repo, but not working with typescript + monorepo

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[nickmccurdy]

It seems like this should work with Yarn 2 as long as workspaces aren’t used https://github.com/yarnpkg/berry/issues/589#issuecomment-573617227

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.