Невозможно использовать JSX, если не указан флаг '--jsx'

Question

Я немного осмотрелся для решения этой проблемы.Все они предлагают добавить "jsx": "react" в ваш файл tsconfig.json.Что я и сделал.Еще было добавить "include: []", что я тоже сделал.Тем не менее, я все еще получаю сообщение об ошибке при попытке редактировать .tsx файлы.Ниже мой файл tsconfig.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Любые предложения будут полезны.Я использую babel 7 для компиляции всего кода с пресетами env, реагировать и набирать текст.Если вам, ребята, нужно больше файлов для отладки, дайте мне знать.

Answer 1

В моем случае я попробовал все диалоговое окно tsconfig.json, Свойства проекта, перезапустил IDE, проверил установленную версию TypeScript и т. Д., И у меня все еще была эта ошибка.Приходите, чтобы узнать, что разработчик добавил в файл проекта условные свойства, так что TypeScriptJSXEmit определен не во всех конфигурациях (что приводило в замешательство диалоговое окно свойств проекта).

Вот выдержка из моего проектафайл, показывающий проблему:

...
  <PropertyGroup Condition="'$(Configuration)' == 'QA'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...

Answer 2

Я получил эту же ошибку и только что понял, как ее устранить.Проблема заключалась в том, что существовал файл jsconfig.json, из-за которого компилятор TypeScript игнорировал файл tsconfig.json.

Чтобы определить, есть ли у вас такая же проблема, в вашей IDE (я использую VS Code), загрузите файл с ошибкой в ​​вашем редакторе, затем вызовите палитру команд и введите «TypeScript: GoКонфигурация проекта ".Если он откроется jsconfig.json, удалите этот файл и перезапустите IDE.Если он откроет файл tsconfig.json на этот раз, вы золотой.

Answer 3

Перезапуск среды IDE в моем случае был исправлением. После перезапуска выскочило окно с сообщением, которое показывало, что у меня не установлено никакого машинописного текста, хотите ли вы установить TypeScript 3.3?Я установил его и теперь он работает отлично. Смотрите здесь окно вывода

Answer 4

Эта ссылка была полезна для решения этой проблемы: https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

См. Раздел: Исправление ошибки TS17004: невозможно использовать JSX, если не указан флаг '--jsx'.

следующая ошибка для меня нова, но в этом есть какой-то смысл, поэтому я добавляю флаг --jsx в tsc и пробую tsc --jsx helloWorld.tsx, но похоже, что пропустил параметр в --jsx.

tsc --jsx helloWorld.tsx message TS6081: Аргументом для «--jsx» должно быть «сохранить» или «реагировать».В текущей итерации TypeScript 1.6, по-видимому, есть две опции для --jsx, оба сохраняют или реагируют.

preserve сохранит jsx в выходных данных.Я предполагаю, что это так, чтобы вы могли использовать такие инструменты, как JSX, чтобы фактически обеспечить перевод.«Реакция» удалит синтаксис jsx и превратит его в простой javascript, чтобы в файле TSX получился React.createElement («div», null).Пропустив опцию реагирования, мы на этом заканчиваем:

tsc --jsx реагировать helloWorld.tsx helloWorld.tsx (11,14): ошибка TS2607: класс элементов JSX не поддерживает атрибуты, потому что онне имеет свойства 'props' helloWorld.tsx (11,44): ошибка TS2304: не удается найти имя «mountNode».Далее я собираюсь заняться последней ошибкой, так как изначально я не понимал ошибку JSX выше.

Answer 5

Этот ответ относится к коду VS и этой конкретной ошибке, которая сохраняется в этой IDE.(Кто-то может найти это полезным)

Если вы используете что-то вроде Webpack или другого подобного инструмента, вы все равно можете получить эту ошибку, даже если ваш tsconfig имеет опцию компилятора для jsx, установленную в React.

Существует решение для этого.Проблема в том, что VS Code имеет встроенное автоопределение для tsc.

Чтобы избавиться от ошибки в редакторе, вы можете указать это в настройках пользователя:

{
    "typescript.tsc.autoDetect": "off"
}

Просто обратите внимание, что выбольше не будет получать автоматическое обнаружение tsc, но если вы в основном используете такие инструменты, как Webpack или обрабатываете команду самостоятельно с флагами, это не так уж сложно.

Примечание: Делайте это только в случае ошибкисохраняется в кодексе VS.Чтобы убедиться, что такое поведение сохраняется, перезагрузите окна и перезапустите редактор после настройки файла tsconfig.json.

Answer 6

Невозможно использовать JSX, если не указан флаг '--jsx'

Перезагрузите IDE.Иногда изменения tsconfig.json не сразу принимаются ?