Блог

Главная - Вопросы по программированию - Расширения файлов React typescript .tsx

Расширения файлов React typescript .tsx

#reactjs #typescript #webpack #eslint #typescript-eslint

#reactjs #typescript #webpack #eslint #typescript-eslint

Вопрос:

Я меняю свой проект react на react-typescript. Я уже создал tsconfig и eslintrc, и все готово и работает. Я также изменил все свои файлы js на файлы tsx. Но теперь я получаю сообщение об ошибке, которое он не распознает import App from "./App" , и мне нужно добавить .tsx "./App.tsx" . Я знаю, что могу изменить конфигурационный файл webpack, и я добавил это:

 module.exports = {
resolve: {
    enforceExtension: false,
    extensions: ['.ts', '.tsx', '.js', '.json'],
},
};

Но это не помогло, по-прежнему появляется та же ошибка.
Как я могу изменить файл конфигурации, чтобы он знал, что нужно читать файлы .tsx?
Должен ли я изменить eslintrc? tsconfig? или webpack?
Спасибо

P.s Я использовал Create React App, поэтому у меня уже есть конфигурация webpack по умолчанию

Комментарии:

1. Можете ли вы попробовать добавить это поле в ts.config.lib.json: «включить»: [ » */ .js», » */ .jsx», » */ .ts», » */ .tsx» ]

2. Я пытался, это не сработало

3. Можете ли вы поделиться полной конфигурацией wepback?

4. Я использую конфигурацию веб-пакета Create React App по умолчанию, поэтому не добавлял дополнительную конфигурацию. Вот мои настройки eslint и ts: codesandbox.io/s/gifted-fermi-pp5fi?file=/eslintrc.js

5. Не могли бы вы любезно поделиться тем, как называется корневой index файл, а также app файл? Меня особенно интересуют расширения, используемые для обоих файлов. Спасибо.

Ответ №1:

Так что в конечном итоге это была моя ошибка. Если вы создаете приложение react с помощью CRA, webpack уже знает, как обрабатывать расширения tsx, не нужно НИЧЕГО добавлять! Просто повторно дополните его. это была глупая ошибка, демонстративно извлекая из нее уроки