Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error location in error messages is not clickable in some cases, because it's relative to process.cwd(). #789

Closed
siarheiyelin opened this issue Dec 23, 2022 · 2 comments · Fixed by #792

Comments

@siarheiyelin
Copy link

siarheiyelin commented Dec 23, 2022

Current behavior

When typescript error message is printed to console of IDE (e.g. WebStorm), then the IDE has an opportunity to render file location as clickable if the location is relative to the project's root folder.
I.e. it's clickable in next cases:

  • when Webpack is run from the same folder as project's root folder. Because "process.cwd()" is equal to the project's root folder.
  • when file location in console logs is absolute.

Unfortunately, the file location isn't clickable when Webpack is run from some nested folder rather than from project's root (it could be the case in monorepo).
As a result, error file location in console isn't relative to the project's root folder anymore, and thus IDE has no possibility to render it as clickable.

The logic related to printing file path is located here:
https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/main/src/formatter/webpack-formatter.ts#L18
let location = chalk.bold(relativeToContext(issue.file, process.cwd()));

Expected behavior

Print absolute file location rather than relative. It could also be an option of ForkTsCheckerWebpackPlugin which enables printing of absolute file path.

Steps to reproduce the issue

  1. Create app using latest Webpack
// create react app
mkdir test
cd test
npx create-react-app my-app  --template typescript

As a result, next folders will be created on file system: ./test/my-app/**
2) Use WebStorm IDE to open "test" folder as projects root folder.
3) Change the code to make some TS error
4) Start newly created app dev server from console of the IDE.
As a result, any typescript errors will not be clickable in console of IDE.
image

Please pay attention that the errors are clickable if "my-app" folder is opened on "step 2" above.
image

Environment

  • fork-ts-checker-webpack-plugin: 6.5.2
  • typescript: 4.9.3
  • webpack: 5.x
  • os: Windows 11
piotr-oles added a commit that referenced this issue Jan 8, 2023
Add `formatter.pathType` option with available values `relative`
(default) and `absolute`. If you set it to `absolute`, the plugin will
print absolute paths to error locations.

✅ Closes: #789
piotr-oles added a commit that referenced this issue Jan 10, 2023
Add `formatter.pathType` option with available values `relative`
(default) and `absolute`. If you set it to `absolute`, the plugin will
print absolute paths to error locations.

✅ Closes: #789
piotr-oles added a commit that referenced this issue Jan 10, 2023
Add `formatter.pathType` option with available values `relative`
(default) and `absolute`. If you set it to `absolute`, the plugin will
print absolute paths to error locations.

✅ Closes: #789
@piotr-oles
Copy link
Collaborator

Starting from 7.3.0, you can use { formatter: { type: 'codeframe', pathType: 'absolute' } } config to use absolute paths :)

@github-actions
Copy link

🎉 This issue has been resolved in version 7.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants