Я хотел бы использовать TypeScript и React в проекте Laravel.

Я хотел бы использовать машинописный текст и реагировать в проекте Laravel. Однако произошла ошибка, когда я сделал «nom run dev». Я знаю, что мне нужно изменить app.tsx, чтобы скомпилировать его. Где я должен изменить что-то еще? Я посмотрел, чтобы исправить следующую ошибку. TS17004: нельзя использовать JSX, если не указан флаг --jsx. Я изменил tsconfig.json в своем проекте laravel. но ошибки Cannot use JSX по-прежнему возникают. Журнал ошибок ниже.

[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(23,21)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

       Asset      Size   Chunks             Chunk Names
/css/app.css   177 KiB  /ts/app  [emitted]  /ts/app
  /ts/app.js  1.06 MiB  /ts/app  [emitted]  /ts/app

ERROR in ./resources/ts/components/Example.tsx 5:16
Module parse failed: Unexpected token (5:16)
File was processed with these loaders:
 * ../../../node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export default class Example extends Component {
|     render() {
>         return (<div className="container">
|                 <div className="row justify-content-center">
|                     <div className="col-md-8">
 @ ./resources/ts/app.tsx 13:0-31
 @ multi ./resources/ts/app.tsx ./resources/sass/app.scss

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(1,8)
      TS1259: Module '"/Users/username/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(2,8)
      TS1192: Module '"/Users/username/node_modules/@types/react-dom/index"' has no default export.

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(7,13)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

TSconfig.js ниже

{
    "compilerOptions": {
      "outDir": "./built/",
      "sourceMap": true,
      "strict": true,
      "noImplicitReturns": true,
      "noImplicitAny": true,
      "module": "es2015",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "moduleResolution": "node",
      "target": "es6",
      "jsx": "preserve",
      "lib": [
        "es2016",
        "dom"
      ]
    },
    "include": [
      "resources/ts/**/*" // TypeScript
    ]
}

reactjs typescript laravel laravel-mix
person user2006734    schedule 07.02.2020    source источник
comment
не совсем, я пытался эти ответы. но проблемы не решились   -  person user2006734    schedule 07.02.2020
comment
Помогает ли использование "jsx": "react", "allowSyntheticDefaultImports": "true" в параметрах вашего компилятора?   -  person r3dst0rm    schedule 07.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Измените tsconfig.json для правильной обработки jsx

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      // "esnext"
    ],
    // "allowJs": true,
    "skipLibCheck": false,
    "allowSyntheticDefaultImports": true, //you need this
    "strict": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsxdev", // can be (react, react-jsxdev, react-jsx). preserve will not convert jsx and preserve it, you don't need that
    "sourceMap": true,
    "experimentalDecorators": true,
    "baseUrl": "resources/js",
  },
  "include": [
    "resources" // I have my tsx and ts in this directory, modify this as per your needs
  ]
}

Возможно, вам также потребуется соответствующим образом настроить babel

Добавьте это в свой файл .babelrc, если у вас его нет, создайте его.

{
    "presets": [
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

Убедитесь, что у вас установлены соответствующие пакеты:

npm install --save-dev @babel/preset-react ts-loader typescript
person Sudhanshu Kumar    schedule 25.01.2021