Как можно получить файлы с расширением *.vue.ts скомпиленные ts-loader?

У меня проект микрофронт, связка Vue 3 + webpack ("5.88.1") . Используются vue-loader и ts-loader. Конфиг webpack :

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const output = path.resolve(__dirname, `dist/bin`);

module.exports = {
 // devtool: 'source-map',
 entry: ['regenerator-runtime/runtime.js'],
 output: {
   filename: 'js/[contenthash].js',
   path: output ,
   clean: true,
 },
 optimization: {
   splitChunks: {
     chunks: 'all',
   },
 },
 module: {
   rules: [
     {
       test: /\.js$/,
       exclude: '/node_modules/',
       use: [{ loader: 'babel-loader' }],
     },
     {
       test: /\.ts$/,
       exclude: '/node_modules/',
       loader: 'ts-loader',
       options: {
         appendTsSuffixTo: [/\.vue$/],
       },
     },
     {
       test: /\.vue$/,
       exclude: '/node_modules/',
       use: [{ loader: 'vue-loader' }],
     },
     {
       test: /\.(s)?css$/,
       use: [
         { loader:  MiniCssExtractPlugin.loader },
         { loader: 'css-loader' },
         { loader: 'postcss-loader' },
         { loader: 'sass-loader' },
       ],
     },
     {
       test: /\.svg$/,
       type: 'asset/inline',
     },
     {
       test: /\.(jp(e)?g|png|gif)$/,
       type: 'asset/resource',
       generator: {
         filename: 'assets/images/[contenthash][ext]',
       },
     },
     {
       test: /\.(woff(2)?|ttf|eot|otf)$/,
       type: 'asset/resource',
       generator: {
         filename: 'assets/fonts/[contenthash][ext]',
       },
     },
   ],
 },
 resolve: {
   extensions: ['.vue', '.js', '.ts', '.json'],
   alias: {
     '@': path.resolve(__dirname, 'src'),
   },
 },
 plugins: [
   new VueLoaderPlugin(),
   new MiniCssExtractPlugin({
     filename: 'css/[contenthash].css',
   }),
   new ModuleFederationPlugin({
     name: 'Microfront',
     filename: 'entry.js',
     exposes: {
       './frontEntry': './src/front',
     },

   }),
 ],
};

TS config:

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "node_modules/ses/index.d.ts"
  ],
  "exclude": ["node_modules"]
}


Суть проблемы в том, что после запуска команды npm run build плагин ts-loader компилит компоненты vue в формат *.vue.ts где-то в памяти видимо, не сохраняя даже временно в директорию build и кричит , что у меня в некоторый файлах есть ошибки, хотя я их поправил и все, что мне подсветил редактор. Помимо того, он показывает ошибки в строках, которые не проверить , так как мои фалы на порядок меньше. Я понимаю , что то , что он отображает это уже собранные файлы со всеми импортированными объектами функциями в этом компоненте, потому количество строк не совпадает, но я пробегался по тем вложениям и все ошибки исправил, но проблема не исчезла. Каким образом можно вытащить те скомпилированные vue.ts файлы, чтобы найти ошибки.

Пример ошибок :

ERROR in C:\Main\Projects\src\front\pages\sections\Info.vue.ts
817:62-82
[tsl] ERROR in C:\Main\Projects\src\front\pages\sections\Info.vue.ts(817,63)
      TS2532: Object is possibly 'undefined'.

ERROR in C:\Main\Projects\src\front\pages\sections\DialogView.vue.ts
250:67-86
[tsl] ERROR in C:\Main\Projects\src\front\pages\sections\DialogView.vue.ts(250,68)
      TS2532: Object is possibly 'undefined'.
Visual.vue.ts
Visual.vue.ts
Visual.vue.ts
Visual.vue.ts
970:86-96
[tsl] ERROR in C:\Main\Projects\src\front\pages\sections\Visual.vue.ts(970,87)
      TS2532: Object is possibly 'undefined'.

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.92.1 compiled with 3 errors in 295502 ms

Пробовал включать sourcemap в devtool, запускать команду tsx и установки плагина CopyWebPackPlugin, не особо помогло. Подскажите пожалуйста, как можно эти ошибки поправить?


Ответы (0 шт):