Всем привет. Помогите пожалуйста разобраться, пытаюсь накатить TS на React Проект и столкнулся с проблемой.
До этого webpack понимал в путях импорта index.jsx и позволял не дописывать index.jsx
К примеру у меня есть компонент
components/Container/index.jsx
Я мог написать импорт без index.jsx
import Container from "components/Container";
После установки TypeScript мне приходится указывать явно сам файл. На скрине видно два варианта указания пути.
Подскажите как можно побороть это ? Это надо в конфигах TS указывать или WP ?
На всякий случай вот tsconfig
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"checkJs": false,
"noEmitOnError": true,
"allowSyntheticDefaultImports":true,
"allowUnreachableCode": true,
},
"compileOnSave": true,
"exclude": [ "/node_modules/" ]
}
WP config
module.exports = {
entry: {
public: "./src/public.entrypoint.tsx",
},
output: {
filename: "[name].js",
path: path.join(__dirname, "dist"),
publicPath: "/",
},
module: {
rules: [
// we use babel-loader to load our jsx and tsx files
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg|jpeg|gif|woff|eot|ttf|otf)$/i,
loader: "file-loader",
options: {
outputPath: "assets",
},
},
{
test: /\.svg$/,
use: ["@svgr/webpack"],
},
],
},
resolve: {
extensions: ["*", ".tsx", ".ts", ".js", ".jsx"],
alias: {
clearText: path.resolve(__dirname, "src/clearText.js"),
components: path.resolve(__dirname, "src/components/"),
connectors: path.resolve(__dirname, "src/connectors/"),
containers: path.resolve(__dirname, "src/containers/"),
contexts: path.resolve(__dirname, "src/contexts/"),
fonts: path.resolve(__dirname, "src/fonts/"),
helpers: path.resolve(__dirname, "src/helpers.js"),
hooks: path.resolve(__dirname, "src/hooks/"),
mock: path.resolve(__dirname, "src/mock/"),
img: path.resolve(__dirname, "src/img/"),
pages: path.resolve(__dirname, "src/pages/"),
utils: path.resolve(__dirname, "src/utils/"),
slice: path.resolve(__dirname, "src/slice/"),
colors: path.resolve(__dirname, "src/colors/"),
reusedStyles: path.resolve(__dirname, "src/reusedStyles/"),
media: path.resolve(__dirname, "src/media/"),
commonHelpers: path.resolve(__dirname, "src/commonHelpers/"),
},
},
plugins: [
new MomentLocales(),
new Clean(),
new Copy([{ from: "public", to: "." }]),
new Html({
chunks: ["public"],
hash: true,
scriptLoading: "defer",
template: "public/index.html",
}),
// new BundleAnalyzer(),
],
devServer: {
disableHostCheck: true,
historyApiFallback: true,
overlay: {
warnings: true,
errors: true,
},
port: 3000,
},
};
Простой
Сложный
