Как настроить react-app для typescript?

Question

[dark_king_13]

Такая ситуация. Создаю приложение с помощью yarn create react-app app-name, затем запуская yarn eject и в конфиге webpack прописываю

...
resolve: {
      modules: ['node_modules', 'src', paths.appNodeModules].concat(
        modules.additionalModulePaths || []
      ),
...

Теперь могу создать следующею структуру:

--src
----pages
------index.js
------Auth
--------Auth.jsx
----App.jsx

В файле index.jsexport { default as Auth} from './Auth/Auth'
В Auth.jsx собственно сам компонент

И теперь в App.jsx я могу импортировать его с так:import { Auth } from 'pages'
И всё работает. Без всяких ./ ../../ и т.д.

Вот только если земенить js -> ts, jsx -> tsx, то всё перестаёт работать.

Ошибки

Я так понимаю, нужно что-то в webpack добавить, вот только не знаю что.

Comments

[Тигран Абрамян]

tsconfig.json файл в проекте приветствуется?

[dark_king_13]

TAbrahamyan, да, он по умолчанию появляется, если использовать yarn create react-app app-name --typescript

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

[Тигран Абрамян]

dark_king_13,

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'none',
    entry: {
        app: path.join(__dirname, 'src', 'index.tsx')
    },
    target: 'web',
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ]
}

[dark_king_13]

TAbrahamyan, немного не понял сути. Все необходимые лоадеры для ts уже стоят. Проект на ts работает. Проблемы только с импортом в виде import { Auth } from 'pages'

Answer 1

[dark_king_13]

Дописал ещё в tsconfig.json

"compilerOptions": {
  ...
  "baseUrl": "./src",
  ...

И всё заработало

Answer 2

[Олег Гамега]

ts есть из коробки в cra

Comments

[dark_king_13]

ts то есть, вот только import { Auth } from 'pages' не работает

[Олег Гамега]

dark_king_13, тут уже что то в коде наложали