Показать сообщение отдельно
  #1 (permalink)  
Старый 13.04.2023, 17:51
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,707

Typescript, webpack: no appropriate loader to handle file
Здравствуйте.
Помогите, пожалуйста, разобраться с проблемой.

Хочу расширить реализацию библиотеки laravel-echo.
Расширяю класс Echo - все ок:
import Echo from 'laravel-echo';

export default class Client extends Echo {}

Но как только пытаюсь расширить класс соединения, то получаю ошибку:
Цитата:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
import {PusherConnector as Base} from 'laravel-echo/src/connector/pusher-connector';

export default class PusherConnector extends Base {}

Такое ощущение, как-будто проект пытается импортировать файл как js, а не как ts.
Если пытаться расширить declaration file (.d.ts), то сборщик пишет, что не может найти указанный модуль, хотя он 100% присутствует по указанному адресу:
Цитата:
Module not found: Error: Can't resolve 'laravel-echo/dist/connector/pusher-connector'

webpack config:
/* eslint-disable */

require('dotenv').config();

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = () => {
    const env = process.env.APP_ENV;
    const appUrl = String(process.env.APP_URL).replace(/\/$/u, '').trim();
    const buildPublicDirectory = String(process.env.BUILD_URL)
        .replace(/^\//u, '')
        .replace(/\/$/u, '')
        .trim()

    const publicPath = (env === 'production' && appUrl.length && buildPublicDirectory.length) ?
        `${appUrl}/${buildPublicDirectory}/` :
        undefined

    return {
        mode: 'development',
        devtool: 'inline-source-map',
        entry: ['core-js/stable', path.resolve(__dirname, 'client/src', 'index.tsx')],
        output: {
            clean: true,
            path: path.resolve(__dirname, 'client/dist'),
            filename: 'bundle.ts.js',
            chunkFilename: '[name].[contenthash].bundle.ts.js',
            asyncChunks: true,
            assetModuleFilename: 'assets/[hash][ext][query]',
            publicPath,
        },
        plugins: [
            new MomentLocalesPlugin({
                localesToKeep: ['ru'],
            }),

            new MiniCssExtractPlugin({
                filename: '[name].bundle.css',
                chunkFilename: '[id].css'
            }),

            require('autoprefixer'),

            new ESLintPlugin({
                extensions: ['.js', '.jsx', '.ts', '.tsx'],
                fix: true,
            }),

            new webpack.DefinePlugin({
                APP_ENV: JSON.stringify(process.env.APP_ENV),
                APP_NAME: JSON.stringify(process.env.APP_NAME),
                SENTRY_TRACES_SAMPLE_RATE: JSON.stringify(process.env.SENTRY_TRACES_SAMPLE_RATE),
                SENTRY_REACT_DSN: JSON.stringify(process.env.SENTRY_REACT_DSN),
                MIX_PUSHER_APP_KEY: JSON.stringify(process.env.MIX_PUSHER_APP_KEY),
                MIX_PUSHER_HOST: JSON.stringify(process.env.MIX_PUSHER_HOST),
                MIX_PUSHER_PORT: JSON.stringify(process.env.MIX_PUSHER_PORT),
            }),
        ],
        resolve: {
            extensions: ['.tsx', '.ts', '.js'],
        },
        devServer: {
            allowedHosts: 'all',
            headers: {
                'Access-Control-Allow-Origin': process.env.APP_URL,
                'Access-Control-Allow-Methods': 'GET, POST, OPTIONS'
            },
            static: {
                directory: path.resolve(__dirname, 'client/dist'),
            },
            open: false,
            hot: true,
            host: "0.0.0.0",
            port: 9045,
        },
        watchOptions: {
            poll: 1000,
        },
        module: {
            rules: [{
                test: /\.(jsx|js|tsx|ts)$/,
                include: path.resolve(__dirname, 'client'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        plugins: [
                            ['@babel/plugin-transform-modules-commonjs'],
                            ['@babel/plugin-proposal-export-default-from'],
                            ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true}],
                            ['@babel/plugin-proposal-class-properties'],
                            ['@babel/plugin-transform-runtime'],
                        ],
                        presets: [
                            ['@babel/preset-env', {
                                corejs: {version: '3.26'},
                                useBuiltIns: 'usage',
                                shippedProposals: true,
                                targets: {
                                    'edge': '17',
                                    'firefox': '60',
                                    'chrome': '67',
                                    'safari': '11.1',
                                    'ie': '11'
                                }
                            }],
                            ['@babel/preset-react'],
                            ['@babel/preset-typescript'],
                        ]
                    }
                }]
            }, {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass"),
                        },
                    },
                ],
            }, {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            }, {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            }],
        }
    };
};

Подскажите, пожалуйста, как можно решить описанную проблему?
Ответить с цитированием