Здравствуйте.
Помогите, пожалуйста, разобраться с проблемой.
Хочу расширить реализацию библиотеки laravel-echo.
Расширяю класс Echo - все ок:
import Echo from 'laravel-echo';
export default class Client extends Echo {}
Но как только пытаюсь расширить класс соединения, то получаю ошибку:
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',
}],
}
};
};
Подскажите, пожалуйста, как можно решить описанную проблему?