typescript - 在新的 create-react-app 项目中通过“as”关键字键入断言会导致“解析错误:意外的令牌,预期的“;””
问题描述
我创建了一个新的 CRA 项目yarn create react-app my-app --template typescript
,在运行开发服务器 ( ) 时出现以下错误yarn start
:
src/App.tsx
Line 5:24: Parsing error: Unexpected token, expected ";"
3 | import "./App.css";
4 |
> 5 | const _window = window as any;
| ^
6 |
7 | const App: FC<{}> = () => {
8 | return <div />;
我只在 cra 服务器中得到错误,IDE Typescript 引擎认为代码没有问题。什么可能导致这种情况?
我的 package.json:
{
"name": "xxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.1.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.14",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"ts-action": "^11.0.0",
"ts-action-immer": "^3.0.3",
"typescript": "^4.1.0",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.9.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.15.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"types": ["@emotion/react"]
},
"include": [
"src"
]
}
不确定我可以提供哪些其他有用/相关的信息,即使 SO 迫使我在这里写一些东西让我发布......
解决方案
将现有的 CRA 应用程序从 3.x 版更新到 4.x 版后,我遇到了同样的问题。将我的配置文件与新创建的 CRA 应用程序进行比较,我发现我的 package.json 缺少以下 eslint 配置
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
推荐阅读
- python - django rest框架不输出自定义响应
- java - 我需要在那里显式使用 flush() 方法吗?
- svelte - 获取一个苗条的嵌套自定义商店的价值,在另一个自定义商店中
- python - error 错误响应类型 | 不和谐蟒蛇机器人
- object - 检查对象是否已经存在?
- javascript - 将 javascript/npm 库与依赖项捆绑在一起
- javascript - React 数据表组件。如何动态选择行
- c# - 读取 Request.Body 流并附加到另一个流
- netlogo - 如何使用 NetLogo 程序创建备用路径
- java - 如何定义此变量以使其不会读取错误?