Juniorrrrr
@Juniorrrrr

Как указать Typescript понимать index.tsx по дефолту?

Всем привет. Помогите пожалуйста разобраться, пытаюсь накатить TS на React Проект и столкнулся с проблемой.

До этого webpack понимал в путях импорта index.jsx и позволял не дописывать index.jsx

К примеру у меня есть компонент
components/Container/index.jsx

Я мог написать импорт без index.jsx
import Container from "components/Container";

После установки TypeScript мне приходится указывать явно сам файл. На скрине видно два варианта указания пути.

Подскажите как можно побороть это ? Это надо в конфигах TS указывать или WP ?

5fb243845e273192659896.png
5fb24a4bbe7e8980146630.png

На всякий случай вот 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,

  },
};
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 2
Aetae
@Aetae
Тлен
moduleResolution: node попробуй поставить, хотя с по идее с"module": "es6", он по умолчанию такой должен быть...
Также можно попробовать указать baseUrl.

P.S. Возможно вообще просто надо ребутнуь\сбросить индекс в IDE, порой оно глючит.
Ответ написан
Проверьте, что у вас в webpack.config.js есть такая cтрочка:
resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
},
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы