[help wanted] TS ERROR formatter 🤷🏻‍♂️

[maxim-kolesnikov]

Current behavior

How can I get console TS error formatter as codeframe type instead { file, message } object?

Expected behavior

Need TS error forrmatter as in the terminal, like this:

Steps to reproduce the issue

{
  "name": "using-typescript-without-babel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
    "@types/react": "^17.0.13",
    "@types/react-dom": "^17.0.8",
    "cross-env": "^7.0.3",
    "fork-ts-checker-webpack-plugin": "^6.3.1",
    "html-webpack-plugin": "^5.3.2",
    "react-refresh": "^0.10.0",
    "react-refresh-typescript": "^2.0.1",
    "ts-loader": "^9.2.3",
    "typescript": "4.3.5",
    "webpack": "^5.42.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "start": "webpack serve --hot",
    "build": "cross-env NODE_ENV=production webpack"
  }
}

const path = require('path');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshTypeScript = require('react-refresh-typescript');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  context: __dirname,
  mode: isDevelopment ? 'development' : 'production',
  entry: {
    main: './src/index.tsx',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: path.join(__dirname, 'src'),
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: isDevelopment ? 'tsconfig.dev.json' : 'tsconfig.json',
              transpileOnly: true,
              ...(isDevelopment && {
                getCustomTransformers: () => ({
                  before: [ReactRefreshTypeScript()],
                }),
              }),
            },
          },
        ].filter(Boolean),
      },
    ],
  },
  plugins: [
    isDevelopment && new ReactRefreshPlugin(),
    new ForkTsCheckerWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './public/index.html',
    }),
  ].filter(Boolean),
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
};

Issue reproduction repository

https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/main/examples/typescript-without-babel

Environment

• fork-ts-checker-webpack-plugin: "^6.3.1"
• typescript: "4.3.5"
• eslint: [version from the package.json]
• webpack: "^5.42.0"
• os: [e.g. Ubuntu 19.04]

[lionel-bijaoui]

Hello, how did you fixed this issue ?

[maxim-kolesnikov]

Hello, how did you fixed this issue ?

Can't remember, but hope it's will help u:

    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
    "fork-ts-checker-notifier-webpack-plugin": "^3.0.0",
    "fork-ts-checker-webpack-plugin": "^6.3.3",
    "react-refresh": "^0.10.0",
    "react-refresh-typescript": "^2.0.2",
    "ts-loader": "^9.2.5",
    "typescript": "^4.4.3",
    "webpack": "^5.53.0",
    "webpack-dev-server": "^4.2.1",

const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const {
  createWebpackFormatter,
  createCodeFrameFormatter,
} = require('fork-ts-checker-webpack-plugin/lib/formatter');
const ReactRefreshTypeScript = require('react-refresh-typescript');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');

  plugins.push(!isEnvProd && new ReactRefreshPlugin({ overlay: false }));
  plugins.push(
    new ForkTsCheckerWebpackPlugin({
      formatter: createWebpackFormatter(createCodeFrameFormatter()),
      eslint: {
        enabled: eslintEnabled,
        files: './**/*.{ts,tsx}',
        options: {
          baseConfig: eslintConfigTs,
          configFile: path.resolve(__dirname, '.eslintrc-ts.js'),
          fix: true,
          ...eslintOptions,
        },
      },
    }),
  );
  plugins.push(
    new ForkTsCheckerNotifierWebpackPlugin({
      title: 'TypeScript',
      excludeWarnings: false,
    }),
  );

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    loader: 'ts-loader',
    options: {
      transpileOnly: true,
      ...(!isEnvProd && {
        getCustomTransformers: () => ({
          before: [ReactRefreshTypeScript()],
        }),
      }),
    },

[lionel-bijaoui]

Thank you !

I don't think my issue is exactly the same. It has more to do with transform applied to the file than error formatting.
I created a feature request that might have helped you too, what do you think of it ?

If fork-ts-checker could have applied ReactRefreshTypeScript before type checking, it would have helped you too I think. I might be wrong though.

Have a nice day :)