Bootstrap a TypeScript + React project

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.

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

Glad to hear that 🌹

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?

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

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.

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

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

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)

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" }

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

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

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.

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 :)

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

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

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

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!

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

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"
},