Menu
This is the dependencies in my package.json. this used to work for me in the past.
{
"name": "login-ts-react",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server"
},
"repository": "https://github.com/abhsrivastava/login-ts-react.git",
"author": "Abhishek Srivastava <abhsrivastava@foo>",
"license": "MIT",
"dependencies": {
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2"
},
"devDependencies": {
"@types/react": "^16.3.13",
"@types/react-bootstrap": "^0.32.9",
"@types/react-dom": "^16.0.5",
"awesome-typescript-loader": "^5.0.0",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"source-map-loader": "^0.2.3",
"style-loader": "^0.21.0",
"typescript": "^2.8.3",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
}
}
My tsconfig.js looks like
"target": "es5",
"lib": ["es6"],
"module": "commonjs",
"jsx": "react",
"sourceMap": true,
"outDir": "./build",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./src",
"esModuleInterop": true
When I do yarn start I get error
ERROR in [at-loader] ./node_modules/@types/react-dom/index.d.ts:19:72
TS2304: Cannot find name 'Text'.
ERROR in [at-loader] ./src/index.tsx:6:28
TS2304: Cannot find name 'document'.
I had created an application last week with this very same package.json and it was working without these errors.
Edit:: Based on the answers below I tried two things
tsconfig.js
"target": "es6",
"lib": ["es6"],
"jsx": "react",
Now when I do yarn start I get error
ERROR in [at-loader] ./node_modules/@types/react-dom/index.d.ts:19:72
TS2304: Cannot find name 'Text'.
ERROR in [at-loader] ./src/index.tsx:5:28
TS2304: Cannot find name 'document'.
I also tried
"target": "es5",
"lib": ["es6", "dom"],
"module": "commonjs",
Now I get error
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2381:15
TS2300: Duplicate identifier 'URL'.
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2399:15
TS2300: Duplicate identifier 'URLSearchParams'.
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2417:14
TS2661: Cannot export 'URL'. Only local declarations can be exported from a module.
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2417:19
TS2661: Cannot export 'URLSearchParams'. Only local declarations can be exported from a module.
Child html-webpack-plugin for "index.html":
367
To fix the “cannot find name 'require'” error in TypeScript, install the @types/node package into your project by running npm i -D @types/node . This error can occur when you try to use the Node. js require() function in a TypeScript file.
To solve the "Cannot find name" error in React typescript, use a . tsx extension for the files in which you use JSX, set jsx to react-jsx in your tsconfig. json file and make sure to install all of the necessary @types packages for your application.
The . ts file extension is used when you are creating functions, classes, reducers, etc. that do not require the use of JSX syntax and elements, whereas the . tsx file extension is used when you create a React component and use JSX elements and syntax.
To define a type for React. useState() you must add a <type> after typing the word useState and before the opening parenthesis. This will tell TypeScript that you're giving a specific type to state property variable.
I went to the gitter channel of typescript and asked the question there. I got a solution which is working and I am listing it down here.
I needed to added @types/node version 9 to my package.json. So the working package.json looks like
{
"name": "login-ts-react",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server"
},
"repository": "https://github.com/abhsrivastava/login-ts-react.git",
"author": "Abhishek Srivastava <abhsrivastava@foo>",
"license": "MIT",
"dependencies": {
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2"
},
"devDependencies": {
"@types/react": "^16.3.13",
"@types/node": "9.6.7", // <- right here
"@types/react-bootstrap": "^0.32.9",
"@types/react-dom": "^16.0.5",
"awesome-typescript-loader": "^5.0.0",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"source-map-loader": "^0.2.3",
"style-loader": "^0.21.0",
"typescript": "^2.8.3",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
}
}
and the tsconfig.json looks like
{
"compilerOptions": {
"target": "es5",
"lib": ["es6", "dom"], // <- right here
"module": "commonjs",
"jsx": "react",
"sourceMap": true,
"outDir": "./build",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./src",
"esModuleInterop": true
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With