I got parsing error
bryce0516 opened this issue · 0 comments
First of all please check our spectrum community chat and we recommend to ask your question there for a quickest response and the indexing in search engines:
The only good reason to use issue tracker for your questions would be for "special requests" that doesn't fit into bug reports and feature requests categories.
Hi. Before I ask question, thank you for this project.
I just wanted to learn typescript. That's why I chose your project. This Project is awesome. I was able to learn both styles how to handle functional component and class component. when i using class component. has got error about "Parsing error: Unexpected reserved word 'public'." like readonly, public... etc...
I thought problem is in .eslintrc.js or tsconfig.json. but I couldn't figure it out.
So If you don't mind, give me some advice.
here is my code.
//////////////////////////////////////////////////////////////////////////////////////////////////////////
User.ts
export class User implements IUser {
id: string = cuid();
get fullName(): string {
return `${this.firstName} ${this.lastName}`;
}
constructor(public firstName: string, public lastName: string) {} <<<<<<<<<<<<<<< i've got error here(public)
static deserialize(dto: IUserDTO): IUser {
const model = new User(dto.first_name, dto.last_name);
model.id = dto.id;
return model;
}
serialize(): IUserDTO {
return {
id: this.id,
first_name: this.firstName,
last_name: this.lastName,
};
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////
ClassCounter.tsx
export default class ClassCounter extends React.Component<Props, State> {
state: State = { <<<<<<<<<<<<<<<<<< and i couldn't write readonly reserved keyword. cuz faced parsing.error
count: 0,
};
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
const { handleIncrement } = this;
const { label } = this.props;
const { count } = this.state;
return (
<div>
<span>
{label}: {count}
</span>
<button type="button" onClick={handleIncrement}>
{`Increment`}
</button>
</div>
);
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////
here is my eslintrc.js and tsconfig and package.json
tsconfig
{
"compilerOptions": {
"target": "ESNext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"noEmitHelpers": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noUnusedLocals": true,
"noEmit": true,
"jsx": "react-jsx",
"noImplicitAny": true,
"noImplicitThis": true,
"noEmitOnError": true,
"strictNullChecks": true,
"sourceMap": true,
"typeRoots": [
"./node_modules/@types",
"./src/types"
],
"types": [
"node"
]
},
"include": [
"src",
"./eslintrc.js"
]
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////
eslintrc
module.export = {
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2017,
project: ["./tsconfig.json", "./tsconfig.eslint.json"],
},
plugins: ["@typescript-eslint"],
extends: [
"react-app",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
],
rules: {
// turn on errors for missing imports
"import/no-unresolved": "error",
"import/no-anonymous-default-export": [
"error",
{
allowArray: false,
allowArrowFunction: false,
allowAnonymousClass: false,
allowAnonymousFunction: false,
allowCallExpression: true, // The true value here is for backward compatibility
allowLiteral: false,
allowObject: false,
},
],
"@typescript-eslint/prefer-readonly": "warn",
},
settings: {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"],
},
"import/resolver": {
typescript: {
alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
// Choose from one of the "project" configs below or omit to use <root>/tsconfig.json by default
// use <root>/path/to/folder/tsconfig.json
project: "./src",
// Multiple tsconfigs (Useful for monorepos)
// use a glob pattern
project: "./tsconfig.json",
},
},
},
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////
package.json
{
"name": "litchef-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0",
"@mui/material": "^5.2.2",
"@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": "^17.0.2",
"@types/react-dom": "^17.0.2",
"@types/react-redux": "^7.1.20",
"@types/react-router-dom": "^5.3.2",
"@types/rx": "^4.1.2",
"connected-react-router": "^6.9.2",
"cuid": "^2.1.8",
"history": "^5.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router": "^5.2.1",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"redux-observable": "^2.0.0",
"rxjs": "^7.4.0",
"typesafe-actions": "^5.1.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.5.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.25.3",
"redux-devtools-extension": "^2.13.9"
}
}