gpt4 book ai didi

reactjs - 我想在 Laravel 项目中使用 TypeScript 和 React

转载 作者:行者123 更新时间:2023-12-03 20:57:39 25 4
gpt4 key购买 nike

我想在 Laravel 项目中使用 typescript 并使用react。
但是,当我执行“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
]
}

最佳答案

修改您的 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

关于reactjs - 我想在 Laravel 项目中使用 TypeScript 和 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60109001/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com