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

Я немного искал решение этой проблемы. Все они предлагают добавить "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, response и машинописных пресетов. Если вам ребята нужны больше файлов, чтобы помочь отладить это, дайте мне знать.

Ответ 1

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

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

Ответ 2

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

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

Это решение. Проблема заключается в том, что VS Code имеет встроенное автоматическое обнаружение для tsc.

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

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

Я получал эту ошибку даже при запуске npx tsc --jsx preserve, поэтому --jsx был определенно указан.

В моем случае это было вызвано наличием incremental: true в tsconfig. Очевидно, в инкрементном режиме tsc может игнорировать настройку --jsx и использовать вместо этого информацию из предыдущих сборок (где --jsx все еще был отключен). В качестве решения я временно отключил инкрементную компиляцию, перекомпилировал и снова включил ее. Вероятно, удаление артефактов сборки также может работать.

Ответ 6

Эта ссылка была полезна для решения этой проблемы: 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 выше.

Ответ 7

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

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

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