React TypeScript Webpack - Setup From Scratch (1/8)
HTML-код
- Опубликовано: 21 мар 2021
- ⚡️ Checkout Taskade! www.taskade.com/
📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav/React-Type...
📱 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.
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!
You're killing it man 💪 you have the best react content in the RUclips
Keep going
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!!
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.
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
Believe me, this is the best tutorial on RUclips on this topic to me....
Yeah! Have been waiting for this. Thanks you!
really good video for the juniors, thank you so much, Vishwas. You really understand what we need to expand our knowledge and skills. 🥰
Hi, I just wanted to tell you this Setup/Config series is great enjoyable. Thanks for such an great tutorials.
This is the GOD Tier React/Webpack/TypeScript tutorial!
Eagerly waiting for this series and finally we have it... Thnx!!
Awesome video! Thanks for putting this together. 🙌
You are amazing Vishvas. Thank you for this amazing videos!
Thank you very much, I was looking for something like this for months
This is pure gold ⭐! Great content man!
Thanks a lot!
Amazing !! im just about to initialize a project in Typescript with React and Microfront Architecture with webpack federated modules. Thank you so much !!
Absolutely great tutorial! Thank you very much!
Thanks for this series
Thank you so much for this series
Wow.. thank you so much. 3 things required to be FE developer here are React/TypeScript and Webpack knowledge
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.
Thanks a lot for creating this course
Awesome! thank you Mr Wishwas.
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
Another brilliant tutorial!
Unfortunately, hard to follow along in Oct 2022, but that is always the case with web dev related stuff.
Thanks though!!
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 soo much for this video!!!
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?
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
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.
very good tuto . thank you
Dude, you are the best. Is it possible for you to make a course on redux forms please?
Why do you use babel instead of ts-loader?
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
please make a video on server side rendering SSR
Are you sure this tsconfig setup is proper for browser compatibility?
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??
Superb
Please make one video on Vite + react + TS setup
Why not simply use create react app typescript template?
Awesome
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 :)
please create a playlist on react native
Unable to contribute on your support link - paypal. Please let me know,
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
what about bundle.js file
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..!! 😂😂😂
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 these are added as devDependancy: typescript @types/react @types/react-dom ?
Somehow proxy doesnt work with this webpack setup...
Will you tech Laravel?
.babelrc is automatically created and we don't need to create it separately now.
I want build file is like react-app-cli build
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'
:( 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
"Short" series??!!
[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",
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
But why you're not using JavaScript instead of Typescript?
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.
Bhai jhappi dede
Why is this still such a pain in the ass??
Thank you.
Please note that at the time I am writing this comment we need to add '@babel/plugin-transform-runtime' as well.
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):