paths в tsconfig.json не работают

Question

При всей ошибке в VSCode спокойно хожу по этим роутам через command

tsconfig:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ES5",
    "module": "commonjs",
    "baseUrl": "./",
    "rootDir": ".",
    "esModuleInterop": true,
    "paths": {
      "@src/*": ["./src/*"]
    },
    "types": ["babel__core"]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Структура:

src > 
   shared > 
          ui > 
             component.tsx
             index.ts
    index.ts // reexporting ui
   processes > 
             Main > 
                   main.tsx

main.tsx

import { Page } from '@src/shared';
import { FC } from 'react';
import { Route, Routes } from 'react-router-dom';

export const Main: FC = () => {
  return (
    <Routes>
      <Route index element={<Page />} />
    </Routes>
  );
};

webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx', // Entry point of your TypeScript application
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'), // Output directory
    filename: 'bundle.js', // Output bundle filename
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'], // Resolve TypeScript and JavaScript files
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/, // Apply the following loaders to TypeScript files
        exclude: /node_modules/, // Exclude node_modules directory
        use: {
          loader: 'ts-loader', // Use ts-loader for transpiling TypeScript code
        },
      },
      {
        test: /\.css$/, // Apply the following loaders to CSS files
        use: ['style-loader', 'css-loader'], // Use style-loader to inject CSS into the DOM and css-loader for handling CSS files
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // Apply the following loaders to image files
        type: 'asset/resource', // Use asset/resource to emit the file as a separate asset
      },
    ],
  },
  devServer: {
    static: path.resolve(__dirname, 'build'),
    compress: true,
    port: 3000, // Specify the desired port here
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html')
    })
  ],
};

Ошибка при yarn build или yarn start:

ERROR in ./src/processes/Main/main.tsx 5:15-37
Module not found: Error: Can't resolve '@src/shared' in '/Users/azharchenko/Documents/React/quiz/src/processes/Main'
resolve '@src/shared' in '/Users/azharchenko/Documents/React/quiz/src/processes/Main'
  Parsed request is a module
  using description file: /Users/azharchenko/Documents/React/quiz/package.json (relative path: ./src/processes/Main)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/azharchenko/Documents/React/quiz/src/processes/Main/node_modules doesn't exist or is not a directory
      /Users/azharchenko/Documents/React/quiz/src/processes/node_modules doesn't exist or is not a directory
      /Users/azharchenko/Documents/React/quiz/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/azharchenko/Documents/React/quiz/node_modules
        single file module
          using description file: /Users/azharchenko/Documents/React/quiz/package.json (relative path: ./node_modules/@src/shared)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/React/quiz/node_modules/@src/shared doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/React/quiz/node_modules/@src/shared.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/React/quiz/node_modules/@src/shared.ts doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/React/quiz/node_modules/@src/shared.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/React/quiz/node_modules/@src/shared.js doesn't exist
        /Users/azharchenko/Documents/React/quiz/node_modules/@src/shared doesn't exist
      /Users/azharchenko/Documents/React/node_modules doesn't exist or is not a directory
      looking for modules in /Users/azharchenko/Documents/node_modules
        single file module
          using description file: /Users/azharchenko/Documents/package.json (relative path: ./node_modules/@src/shared)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/node_modules/@src/shared doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/node_modules/@src/shared.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/node_modules/@src/shared.ts doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/node_modules/@src/shared.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/azharchenko/Documents/node_modules/@src/shared.js doesn't exist
        /Users/azharchenko/Documents/node_modules/@src/shared doesn't exist
      /Users/azharchenko/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/processes/Main/index.ts 17:13-30
 @ ./src/processes/index.ts 17:13-30
 @ ./src/index.tsx 5:18-40

webpack 5.86.0 compiled with 1 error in 3608 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  quiz git:(master) ✗

Answer 1

Webpack по умолчанию не знает о настройках путей в tsconfig.json. Это может вызвать проблему, которую ты описали. Твоя ошибка Module not found: Error: Can't resolve '@src/shared' происходит, потому что Webpack не знает о псевдониме @src/.

Нужно настроить Webpack, чтобы он знал об этих псевдонимах, которые ты установил в tsconfig.json. Вебпак предоставляет опцию resolve.alias для этого.

Чтобы это исправить, добавь следующий код в конфигурационный файл Webpack:

const path = require('path');

module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      '@src': path.resolve(__dirname, './src/'),
    },
    // ...
  },
  // ...
};

Этот код указывает Webpack, что при импорте пути, начинающегося с @src/, нужно смотреть в папку src на уровне корневого каталога проекта.

Также обрати внимание, что пакет tsconfig-paths-webpack-plugin может автоматически разрешить пути из tsconfig.json для Webpack. Нужно будет установить этот пакет и добавить его в конфигурационный файл Webpack:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...
  resolve: {
    // ...
    plugins: [
      new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })
    ],
    // ...
  },
  // ...
};

убедись, что установил этот пакет через npm или yarn перед его использованием.

БЛОГ НА HUSL

paths в tsconfig.json не работают

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