diff --git a/app/build-config/craco.config.js b/app/build-config/craco.config.js index ed244778aa..ffb6b0c381 100644 --- a/app/build-config/craco.config.js +++ b/app/build-config/craco.config.js @@ -4,6 +4,7 @@ const { BABEL_INCLUDED_REGEXP, BABEL_EXCLUDED_REGEXP, CSS_URL_ROOT_PATH, } = require("./constants"); const SVGRLoader = require.resolve("@svgr/webpack"); const FileLoader = require.resolve("file-loader"); +const { uuiCustomFormatter } = require("./utils/issueFormatter"); /** * See https://craco.js.org/ @@ -89,6 +90,13 @@ function configureWebpack(config, { paths }) { if (isUseBuildFolderOfDeps()) { config.resolve.mainFields = ["epam:uui:main", "browser", "module", "main"]; } + + config.plugins.forEach(p => { + if (p.constructor.name === 'ForkTsCheckerWebpackPlugin') { + p.options.formatter = uuiCustomFormatter; + } + }) + return config; } diff --git a/app/build-config/utils/issueFormatter.js b/app/build-config/utils/issueFormatter.js new file mode 100644 index 0000000000..d24649db0f --- /dev/null +++ b/app/build-config/utils/issueFormatter.js @@ -0,0 +1,29 @@ +const { createCodeFrameFormatter } = require('../../../node_modules/fork-ts-checker-webpack-plugin/lib/formatter/CodeFrameFormatter.js') +const path = require('path'); +const os = require('os'); + +module.exports = { uuiCustomFormatter }; + +const defaultFormatter = createCodeFrameFormatter({}); + +function uuiCustomFormatter(issue) { + function formatIssueLocation(location) { + return `${location.start.line}:${location.start.column}`; + } + function norm(p) { + return path.normalize(p).replace(/\\+/g, '/') + } + const formattedIssue = defaultFormatter(issue); + if (issue.file) { + // Next line is the main reason why we created custom formatter + // We want error location to be clickable in WebStorm console log. + // In order to make it clickable, the location must be absolute or relative to the root folder, but not relative to "app". + // + let location = norm(issue.file); + if (issue.location) { + location += `:${formatIssueLocation(issue.location)}`; + } + return `${location}${os.EOL}${formattedIssue}` + } + return formattedIssue; +}