Bootstrap a TypeScript + React project

Share this video with your friends

Send Tweet

Learn how to setup a TypeScript + React project from scratch. Understand the reason behind every line involved in the configuration allowing you to customize it at will in the future.

Rajat Raj
Rajat Raj
~ 3 years ago

Followed the whole lesson, created directories in the same structure and created files the same way. But it is not working. Error: ERROR in [tsl] ERROR TS18002: The 'files' list in config file 'tsconfig.json' is empty.

got resolved. this error occurred because of tsconfig.json residing in public folder.

Basarat Ali Syed
Basarat Ali Syedinstructor
~ 3 years ago

got resolved. this error occurred because of tsconfig.json residing in public folder.

Glad to hear that 🌹

trickydisco78
trickydisco78
~ 3 years ago

I've just gone through the first bootstrap part and i get an error when running npm start.

"$ webpack-dev-server ./webpack.config.js --content-base ./public The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D"

seems they've changed a webpack dependency?

trickydisco78
trickydisco78
~ 3 years ago

The issue i'm finding with this course is you didn't specifiy a webpack version. as you've put just 'webpack' in the command line mine has installed 4.2.0 which it appears it quite different. i'm getting warnings when trying to load and build

Cher
Cher
~ 3 years ago

Same here, this setup needs to be updated as the latest webpack has changed quite a bit. Or at least mention the versions installed originally. The build does not happen without installing the older versions.

Basarat Ali Syed
Basarat Ali Syedinstructor
~ 3 years ago

I've updated the lesson / course for the latest webpack changes. The steps should work once more 🌹

webcuisine
webcuisine
~ 3 years ago

Hi Basarat ... I get this error message: Cannot use JSX unless the '--jsx' flag is provided.

Basarat Ali Syed
Basarat Ali Syedinstructor
~ 3 years ago

Hi Basarat ... I get this error message: Cannot use JSX unless the '--jsx' flag is provided.

Make sure your tsconfig.json matches what is shown in the lesson. We set jsx to react in the video (around 2:07)

Applaudo
Applaudo
~ 3 years ago

Hi Basarat, great lesson. Just wanted to mention that the snippets on the Transcript should be revised.

  1. The package.json file is currently set to:

"scripts": { "build": "webpack ./webpack.config.js", "start": "webpack-dev-server ./webpack.config.js --content-base ./public" }

And it should be (like in the video):

"scripts": { "build": "webpack -p", "start": "webpack-dev-server -d --content-base ./public" }

  1. There's a typo in the webpack.config.js file, it says 'patch' instead of 'path:'

output: { patch __dirname + '/public', filename: 'build/app.js' },

Regan Perkins
Regan Perkins
~ 2 years ago

Hi Basarat ... I get this error message: Cannot use JSX unless the '--jsx' flag is provided.

Make sure your tsconfig.json matches what is shown in the lesson. We set jsx to react in the video (around 2:07)

I get the same issue but have the sconfig.json file the exact same. The full error for me is:

ERROR in ./src/app.tsx 5:16 Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type. | var React = require("react"); | var ReactDOM = require("react-dom");

ReactDOM.render(<div>Hello world</div>, document.getElementById('root')); | @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.tsx main[1]

ERROR in /Users/@/Documents/projects/@/src/app.tsx ./src/app.tsx [tsl] ERROR in /Users/@/Documents/projects/@/src/app.tsx(5,3) TS17004: Cannot use JSX unless the '--jsx' flag is provided.

Henri d'Orgeval
Henri d'Orgeval
~ 2 years ago

Hi Basarat, great lesson, but does not work with latest version of webpack and typescript. I finally found how to make it work : https://github.com/hdorgeval/react-ts-starter (version v0.1.0) It would be awesome if you could update your course :)

Maria Kourouni
Maria Kourouni
~ 2 years ago

Hi everyone, Restart your IDE. Sometimes tsconfig.json changes aren't immediately picked up

Maria Kourouni
Maria Kourouni
~ 2 years ago

And add at your tsconfig.json in compilerOptions: { "compilerOptions": { .........., "jsx": "react" }, ....... }

Aaron Sturm
Aaron Sturm
~ 2 years ago

Isn't this negated now that create-react-app --typescript exists?

Artem Sychov
Artem Sychov
~ 2 years ago

Hi Basarat, great lesson, but does not work with latest version of webpack and typescript. I finally found how to make it work : https://github.com/hdorgeval/react-ts-starter (version v0.1.0) It would be awesome if you could update your course :)

This!

Aniekan
Aniekan
~ 6 months ago

The current state of the course does not work for me See below the result of performing the "npm start" action. I'm investigating on my own but if you can give some guidance on why " Cannot find module 'webpack-cli/bin/config-yargs'", that would be great.


PS C:\Users\Teddy\Documents\ReactJS Tutorial\Typescript with React> npm run start

typescriptreacttutorial@1.0.0 start C:\Users\Teddy\Documents\ReactJS Tutorial\Typescript with React webpack-dev-server webpack.config.js --content-base public

internal/modules/cjs/loader.js:583 throw err; ^

Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (C:\Users\Teddy\Documents\ReactJS Tutorial\Typescript with React\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! typescriptreacttutorial@1.0.0 start: webpack-dev-server webpack.config.js --content-base public npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the typescriptreacttutorial@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Teddy\AppData\Roaming\npm-cache_logs\2020-10-25T23_30_26_312Z-debug.log

Johnny Citizen
Johnny Citizen
~ 5 months ago

Error: Cannot find module 'webpack-cli/bin/config-yargs'

I was able to fix this error by changing the webpack-cli version in package.json to 3.3.12. See this GitHub issue for more information.

"devDependencies": {
"parcel-bundler": "^1.12.3",
"webpack-cli": "3.3.12"
},