我想在 Laravel 项目中使用 TypeScript 和 React
Posted
技术标签:
【中文标题】我想在 Laravel 项目中使用 TypeScript 和 React【英文标题】:I would like to use TypeScript and React in Laravel Project 【发布时间】:2020-05-23 07:51:53 【问题描述】:我想在 Laravel 项目中使用打字稿并做出反应。 但是,当我执行“nom run dev”时发生了错误。 我知道我必须更改 app.tsx 才能编译它。我应该在哪里修改其他内容? 我查找以修复以下错误。 TS17004:除非提供了“--jsx”标志,否则无法使用 JSX。 我在我的 laravel 项目中修改了 tsconfig.json。但仍然出现无法使用 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
]
【问题讨论】:
不是真的,我尝试了这些答案。但问题没有解决 在编译器选项中使用"jsx": "react", "allowSyntheticDefaultImports": "true"
有帮助吗?
【参考方案1】:
修改您的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
【讨论】:
以上是关于我想在 Laravel 项目中使用 TypeScript 和 React的主要内容,如果未能解决你的问题,请参考以下文章