Typescript, webpack: no appropriate loader to handle file
Здравствуйте.
Помогите, пожалуйста, разобраться с проблемой. Хочу расширить реализацию библиотеки 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% присутствует по указанному адресу: Цитата:
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', }], } }; }; Подскажите, пожалуйста, как можно решить описанную проблему? |
Часовой пояс GMT +3, время: 05:45. |