Блог

Главная - Вопросы по программированию - Проект React не компилируется после добавления TypeScript

Проект React не компилируется после добавления TypeScript

#reactjs #typescript #create-react-app

#reactjs #typescript #создать-реагировать-приложение

Вопрос:

Я получаю странную ошибку, поскольку

./src/index.js Строка 56:15: Ожидаемая ошибка синтаксического анализа: ‘>’

Я следовал официальному руководству create-react-app для добавления TypeScript в мой существующий проект Create React App. И после изменения только двух файлов .js (index и App) на .tsx компиляция проекта завершается с ошибкой.

Я удалил глобальное create-react-app, следуя этому руководству по устранению неполадок

файл index.tsx

 import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
  <App store={store} persistor={persistor} basename={PUBLIC_URL} />,
  document.getElementById("root")
);

Примечание: я изменил свой index.js файл в index.tsx, но все еще выдает ошибку для index.js . Я предполагаю, что это выдает ошибку после компиляции в .js

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

1. Добавить свой App.tsx и Index.tsx?

2. Пожалуйста, укажите содержимое соответствующей строки ( ./src/index.js Line 56 )

Ответ №1:

/src/index.js Line 56:15: Parsing error: '>' expected

Вы используете JSX в .js файле. Переименуйте файл в .jsx (или даже лучше `.tsx).

Еще

Вы можете сравнить с приложением TypeScript с помощью npx create-react-app example --template typescript 🌹

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

1. Я уже изменил свой index.js в index.tsx и App.js в App.tsx

2. Если вы все еще получаете сообщение об ошибке в src/index.js , даже если файл больше не существует, просто закройте и перезапустите процесс, выдающий ошибку.

Ответ №2:

После бесполезной борьбы в течение 3 часов я нашел основную причину ошибки 🙂

Как я упоминал ранее в вопросе, я удалил глобальный пакет create-react-app, чтобы избежать проблем, но это создало проблему. Я не знаю почему, но когда я переустановил create-react-app, проблема решена!