React TypeScript Webpack - Setup From Scratch (1/8)
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- ⚡️ Checkout Taskade! www.taskade.com/
📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
Twitter - / codevolutionweb
Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
React TypeScript Webpack - Setup From Scratch
Give Taskade a try - www.taskade.com/
Request for 1 year free upgrade by mentioning Codevolution - www.taskade.com/contact
Vishwas, you've done thousands of React developers all over one of the biggest favors in the world. You are the BEST mate!! Absolute best.
Believe me, this is the best tutorial on TH-cam on this topic to me....
This is the GOD Tier React/Webpack/TypeScript tutorial!
This is the best series of videos on setting up your TS/React coding env - thanks for going to the trouble to get some much detail, the quality of this is so high. Well done!
Just what I was looking for. Some job interviews ask about using Webpack to set up React and I've been spoiled with CRA, React Vite, and Nextjs so I never took the time to set up everything from scratch. Thank you so much!!
Well, it's exactly what i needed. You helping me with redux tutorial first and now you helping me with WP, thank you man.
Never though that creating React project from scratch would be that much fun. Thanks Vishwas 😃😃
really good video for the juniors, thank you so much, Vishwas. You really understand what we need to expand our knowledge and skills. 🥰
You're killing it man 💪 you have the best react content in the TH-cam
Keep going
thank you for making this and explaining what the different config properties are for. Webpack has been causing me a lot of pain and this video is the remedy
Tq bro, you're a saviour for React developers
Wow.. thank you so much. 3 things required to be FE developer here are React/TypeScript and Webpack knowledge
This is pure gold ⭐! Great content man!
Thanks a lot!
Yeah! Have been waiting for this. Thanks you!
Thank you very much, I was looking for something like this for months
Hey, You're doing great work. The way you understand every topic made me feel that you have a deep understanding of the relevant topic. Thanks again, man.......... Best of luck.
Thanks for working stuff. Lot of ppl write blogs and make so many errors. U dont! thanks a lot. I was getting crazy cuz of a lil mistake
You are amazing Vishvas. Thank you for this amazing videos!
Hi, I just wanted to tell you this Setup/Config series is great enjoyable. Thanks for such an great tutorials.
Warning: This is outdated, but still well worth watching, make sure you keep updated with the technology, I'm writing this as there have been many changes in the stack
Eagerly waiting for this series and finally we have it... Thnx!!
Best tutorial! Thank you so much!
thank alot for this series hope in future next js will also come
Max released an epic course recently
@@compeng2013 Can you share the link?
Thank you.
Please note that at the time I am writing this comment we need to add '@babel/plugin-transform-runtime' as well.
Another brilliant tutorial!
Unfortunately, hard to follow along in Oct 2022, but that is always the case with web dev related stuff.
Thanks though!!
Awesome video! Thanks for putting this together. 🙌
Thanks for this series
Absolutely great tutorial! Thank you very much!
Amazing !! im just about to initialize a project in Typescript with React and Microfront Architecture with webpack federated modules. Thank you so much !!
Awesome! thank you Mr Wishwas.
Thanks a lot for creating this course
Thank you soo much for this video!!!
Vishvas Bro...! you are just too good. The teaching methodology is amazing.. keep it up.. & Big thank you for this series. i would like to know more about Webpack 5 chunk splitting functionalities and mono repo. if you can add 2-3 more session to same..? Thanks a ton..! god bless you.
Brother what is your color theme in vs code? I like it so much
why is the webpack.config.js file different in the video than the one in the repo? Which is the correct one to utilize for this portion of the guide?
Great series. I notice the link to the repo containing supporting files isn't available in the description as you said.
Here you go - github.com/gopinav/React-TypeScript-Webpack-Starter
Great video! I have a doubt: Why in github files the webpack.config.js is different in video? Github file is shorter, and if I copy-paste all webpack files inside the directory the terminal returns Cannot find module './webpack.undefined.js' error. That doesn't happen if I write the content of webpack.common.js inside webpack.config.js. Thanks for answering and again, great videos!
He refactored his code.
You can copy the 4 webpack config files (now splited) as it.
You need now to precise your environment, so in `package.json`, specify the `env`:
"start": "webpack serve --config webpack/webpack.config.js --env env=dev --open",
Also add few packages:
yarn add -D @babel/plugin-transform-runtime @pmmmwh/react-refresh-webpack-plugin react-refresh
`yarn start` And All good!
If at start it asks for missing package, just add it.
Next lesson he'll explain that.
Please make one video on Vite + react + TS setup
very good tuto . thank you
Superb
Are you sure this tsconfig setup is proper for browser compatibility?
please make a video on server side rendering SSR
Dude, you are the best. Is it possible for you to make a course on redux forms please?
.babelrc is automatically created and we don't need to create it separately now.
I wish you could make a video tutotrial like this react/webpack setup, but with no "Typescript" 👍
typescript starts out feeling annoying/constricting but eventually you'll hate using regular javascript because everything feels so unkept and naked.
@@PumpkinDog33 i think is a pain.!! , very confusing and complicated.!!, every time you create a variable, a function , a object, or even passig a "prop", you have to remember to creater a "interface", and a bunch of oher stuff....and the you have to complie back to javascript !!, its like walking backwards..and at end, it all comes down to plain compiled javascript !!! it doesn't makes sense..!! 😂😂😂
Why do you use babel instead of ts-loader?
Awesome
Why these are added as devDependancy: typescript @types/react @types/react-dom ?
please create a playlist on react native
Hi Vishwas I like your all videos & all are awesome & all are real time examples only, please can you upload these with latest versions of react 18+ & typescript.
Sorrry Vishwas, but when my server runs it shows the directory of the project instead of rendering App.tsx ... what should I do? 😣
npm install @babel/plugin-transform-runtime -D
Why not simply use create react app typescript template?
after making app.tsx file in source folder i get the error "Cannot use JSX unless the '--jsx' flag is provided" can you resolve it??
Hello. Thank you for awesome tutorial!
But I found some problem. If I make a mistake with Typescript code, then build will be created successfully. Also "npm start" will be executed successfully too.
Something like:
let a = 90
a += 'dfdfdf'
It is possible to prevent building process or starting app if typescript errors exists ?
@Ayomide Bamigboye thank you for your advice
Somehow proxy doesnt work with this webpack setup...
Hey @codevolution, why there isn't much discussion on react typescript in the community, even most of the projects on git are using pure js. is there some reason ? I'm from angular background, so I'm conscious on types
not sure about that. But I'm working in react projects since 1 and half years. we use Typescript for react
After an edit of a text in App.tsx file why it is so slow in compilation to reflect in Browser? Can the compilation time be decreased ?
Yes, I'll cover that in part 4 :)
:( I need Help!!
When i try run the code, this return that : Content security police: The page option has been blocked
this is wat hppens when u follow along tutorial
Unable to contribute on your support link - paypal. Please let me know,
help :)) I am getting error like this. Please help
Failed to load 'D:\Documents
eact-ts-nextjs\webpack\webpack' config
Error: Cannot find module 'D:\Documents
eact-ts-nextjs\webpack.config.js'
what about bundle.js file
I want build file is like react-app-cli build
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration has an unknown property 'plugin'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
-> Options object as provided by the user.
For typos: please correct them.
For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
plugin: …
}
})
]
please answer me, why should this error is coming... webpack version as bellow,
"webpack": "^5.36.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
"html-webpack-plugin": "^5.3.1",
"Short" series??!!
I dont know if you even rewatch your video when posted. Along this tutorial I have a hard time to follow whatever you wrote on the terminal.
No, serious sir please pull that terminal curtain up. Thank you.
Will you tech Laravel?
But why we need to do this we have already npm commands to generate the same template?
Yes that’s also i want to know why we need this
What’s the difference between
Plz reply @codevolution
@@Viveksharma0157 He explains it right at the beginning in the introduction.
To understand what exactly is happening under the hood, with this you have full control of your project
Bhai jhappi dede
Why is this still such a pain in the ass??
But why you're not using JavaScript instead of Typescript?
hi,
Thank you for this course
I have some problems at the end of the video
Everything is working fine until the last command 'npm start'
It display an error and I can't find answer on google
PS C:\Users\USER\Documents\Courses\React & Webpack> npm start
> react-template@1.0.0 start
> webpack serve --config ./webpack/webpack.config.js --open
'Webpack
ode_modules\.bin\' is not recognized as an internal or external command,
operable program or batch file.
node:internal/modules/cjs/loader:1085
throw err;
^
Error: Cannot find module 'C:\Users\USER\Documents\Courses\webpack\bin\webpack.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1082:15)
at Module._load (node:internal/modules/cjs/loader:928:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
It some how try to find the webpack.js in a non existing path
'C:\Users\USER\Documents\Courses\webpack\bin\webpack.js'
you can generate your own tsconfig.json by typing : node_modules/.bin/tsc --init
It doesn't work in oct 2022. Module build failed (from ./node_modules/babel-loader/lib/index.js):
Thank you so much for this series