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

Cannot use JSX unless the '--jsx' flag is provided

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

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

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

Для этого есть решение. Проблема в том, что VS Code имеет встроенное автоматическое обнаружение tsc.

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

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

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

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

Эта ссылка помогла решить эту проблему: 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: Argument for '--jsx' must be 'preserve' or 'react'. In the current iteration of TypeScript 1.6 appears to have two options for --jsx, both preserve or react.

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

tsc --jsx react helloWorld.tsx helloWorld.tsx(11,14): error TS2607: JSX element class does not support attributes because it does not have a 'props' property helloWorld.tsx(11,44): error TS2304: Cannot find name 'mountNode'. I'm going to tackle the last error next, as initially I didn't understand the JSX error above.

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

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

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

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

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

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

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

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

В моем случае проблема заключалась в том, что VSCode сгенерировал пустой файл tsconfig.json, который, конечно же, ничего не сделал.

Я добавил в tsconfig.json из Страница реагирования на Typescript:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

... затем нажмите save, и VSCode взял его оттуда.

Перезапуск моей IDE не помог. Перезапуск сервера TypeScript все же решил эту проблему.

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

Мне пришлось добавить все свое приложение в include.

Итак, мой tsconfig.json выглядит так:

{
    "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./"]
}

Для тех, кто читает, перейдите в tsconfig.json и измените эту строку с react-jsx на react:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

бонус: попробуйте также установить последнюю версию IDE TS (atm 4.2) в vscode CMD + SHIFT + P и изменить ее оттуда.

Следующая ошибка, которую я получаю после запуска начало пряжи:

> [email protected] start /home/ehsan/Documents/GitHub/multi-step-form-typescript
> react-scripts start

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log

Итак, что вам нужно сделать, чтобы избавиться от этого

на вашем терминале нажмите ссылку с ошибкой

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions [параметр] = значение;

а затем измените 239 строк на

else if (parsedCompilerOptions [option]! == valueToCheck && option! == "jsx")

Теперь после изменения этого goto tsconfig.json

а затем заменить «jsx»: «реагировать-jsx» на «jsx»: «реагировать»

теперь запустите свой проект с начало пряжи sudo

Это работает для меня, надеюсь, это сработает и для вас :)

Каждый раз, когда я запускаю npm start, он заменяет все, что я настроил в {jsx: ...}, на react-jsx, чтобы быть совместимым с преобразованием JSX в React 17.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

Проблема заключается в том, что VSCode использует более старую версию машинописного текста (4.0.3), в то время как версия машинописного текста, поставляемая вместе с проектом, - (4.1.2).

Следующее помогло мне:

1. Перейдите в палитру команд CTRL + Shift + P.
2. Выберите «TypeScript: выберите версию TypeScript ...».
3. Выберите «Использовать версию рабочего пространства».

create-react-app сломан «из коробки». AS OF 2021 MAY

Внутри tsconfig include был установлен только на /src, измените на:

  "include": [
    "./src/**/*.ts"
  ]

Если вы видите эту проблему после запуска приложения create-response-app с помощью Typescript, вы можете решить эту проблему, добавив "typescript.tsdk": "node_modules/typescript/lib" в .vscode/settings.json.

Для IntelliSense, если вы используете "jsx": "react-jsx", вам необходимо переключить рабочее пространство на использование TS 4.1+.

Или визуально просто спуститесь к синей панели задач и выберите версию Typescript (возможно, 4.x.x что-нибудь), затем выберите «Выбрать версию TypeScript».

Затем выберите «Использовать версию рабочей области», которая должна ссылаться на node_modules/typescript/lib.

Чтобы решить эту проблему для всех будущих проектов, вы можете установить расширение JavaScript and TypeScript Nightly для VSCode.

В моем случае ни одно из решений не работало, поэтому я посмотрел версию ECMA Scrypt. Моя версия была ec5, вы можете проверить здесь -> tsconfig.json. Итак, я попытался переключить target: "es5" на target: "es2017", и, похоже, он решает проблему, но что-то снова появляется, я отредактирую этот комментарий

Я следил за "более простым решением", упомянутым здесь https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351

"... обновить версию TS в package.json до 4.1.2"

а затем перезапустил VS Code.

Простой перезапуск сервера TS с помощью палитры команд для меня не помог.

Никаких других шагов мне не понадобилось.

В моем случае перезапуска VSCode и обновления машинописных текстов и сценариев выполнения до соответствующих версий было недостаточно. Восстановление после удаления файла .eslintcache окончательно устранило ошибку.

Решение для Sublime Text:

1. Убедитесь, что ваш package.json использует Typescript> = v4.1.2
2. Удалите пакет Sublime Text "Typescript" через Package Control
   • На момент написания в него входит Typescript v3.x
3. Откройте терминал в каталоге Sublime Text «Пакеты».
   • cd "~/Library/Application Support/Sublime Text 3/Packages"
4. Клонируйте репозиторий Typescript-Sublime-Plugin в каталог Packages:
   • git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
5. Откройте настройки пользователя: Sublime Text > Preferences > Settings
6. Добавить "typescript_tsdk": "node_modules/typescript/lib"
   • Это сообщает подключаемому модулю Sublime Typescript использовать версию проекта Typescript, а не его версию в комплекте.
7. Перезапустить Sublime Text
   • В отличие от большинства настроек Sublime Text, для этого требуется перезапуск, чтобы перезапустить сервер Typescript.

Справка:
https://github.com/microsoft/TypeScript-Sublime-Plugin/issues/538

Для тех, кто использует Visual Studio 2019, вы можете исправить это, выполнив следующие действия:

1. В tsconfig.json есть эта часть

"include": [
    "./src/**/*.ts"
]

2. Обновить SDK Typescript в C:\Program Files (x86)\Microsoft SDKs\TypeScript
   Была у меня версия 4.0. Мне нужно было обновить его до 4.1 (точнее, до 4.1.2) с помощью
   1. удаление папки Typescript
   2. В Visual Studio 2019, Расширения> Управление расширениями, установите Typescript 4.1 for Visual Studio.

Я только что исправил эту проблему с помощью своего приятеля, который переустанавливал и перенастраивал каждую чертову вещь, чтобы исправить это. Мы перепробовали все исправления в Интернете (мне даже пришлось решать это самому, поэтому я действительно был сбит с толку, почему мы могли исправить это за него).

Проблема оказалась в этом расширении Бог TypeScript. Как только он был отключен, а затем удален, проблема была решена.

Остерегайтесь ложного бога!

Апрель 2021 года, и эта проблема все еще сохраняется. Я использую реагировать-шаблон-Cra-шаблон с реакцией 17.02.

Это проблема с VSCode, по умолчанию он использует встроенный машинописный текст. Вам просто нужно открыть файл .tsx и

1. Нажмите: Ctrl + Shift + P
2. Входить: Машинопись: выберите версию машинописного текста ...
3. Выбирать: Использовать версию рабочей области.

Это продолжение ответа @basarat, потому что он частично решил проблемы в моем случае. Проблема, с которой я столкнулся, была error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'. Я решил это следующим образом:

1. Запустить снова ваша IDE
2. Удалить ваш tsconfig.json
3. Повторно инициализировать ваш tsconfig.json с помощью `` tsc --init```

Возможно, первый шаг можно было бы пропустить, но я не исследовал это.

Вы можете создать файл .vscode / settings.json в корне вашего проекта. В нем введите { "typescript.tsdk": "node_modules\\typescript\\lib" }, и все готово.

Проблема в том, что vscode использует старую версию Typescript.

изображение, показывающее код на vscode

У меня есть монорепозиторий, и для меня Webstorm автоматически выбрал старую версию TypeScript для подпакета. Для исправления нужно было щелкнуть TypeScript X.X.X в нижнем колонтитуле, выбрать Configure TypeScript ... и выбрать правильный пакет, который работал у меня в Webstorm 2021.1.