React & Webpack 4 From Scratch - No CLI
Why Stack Overflow recommends it
Stack Overflow users link it when they set up React and Webpack by hand following the tutorial and then hit module, loader or dev-server errors worth asking about.
Recommended by 1 people across 1 different months, 2018 to 2020.
What it is
A 25-minute Traversy Media tutorial that builds a React project from scratch using Webpack 4 and Babel instead of Create React App. It walks through the config, loaders and dev server setup, with a starter repo linked in the description.
What people said
Recommends itasahobby · 2019-03 · Stack Overflow · on “How to fix 'Cannot find module 'babel-types'”
I'm trying to setup react with babel and following this video [this video] . However I get that error when using npm start I followed step by step the video. Then changed the babel-babel-plugins with @babel-babel-plugins except babel-loader, and changed .babelrc. Also add a new React component, but tried without including it and still gave me error. ./package.json "scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }, "devDependencies": { "@babel/core": "^7.4.0", "@babel/preset-env": "^7.4.2", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "html-webpack-plugin": "^3.2.0", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpa
Cites Gander7 · 2018-04 · Stack Overflow · on “webpack/webpack-dev-server/react shows directory listing when it should show app”
Using a simple starter react app with webpack-dev-server, it works on one computer but not another. Tried / Info Both computers are windows 10 Using vscode/git bash on both node -v 9.11.1 on both npm -v 5.6.0 on both yarn -v 1.5.1 on both Tried both yarn and npm Deleted all global npm modules in ~/appdata/roaming/npm on both computers Process: This is not my repo but a simple one that works for testing. Comes from awesome video [this video] . git clone [LINK] cd react_webpack_starter npm install npm start (runs webpack-dev-server --mode development --open --hot) Expected Result (1 computer): Browser opens with "My React App" Actual Result (1 computer): Directory listing instead of app, shown here
Cites J. Doe · 2018-08 · Stack Overflow · on “Cannot find module '@babel/core'”
I am following along with this webpack4/react tutorial: [this video] I have followed it exactly up until the part where he runs npm start. The difference is, his app runs, and mine gets the error: Cannot find module '@babel/core' The full error: ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.<anonymous> (C:\Users\joeyf\Desktop\Code\Github\webpack4-sample\node_modules\babel-loader\lib\index.js:5:15) at Module._compile (module.js:652
Cites Souvik Ghosh · 2018-08 · Stack Overflow · on “Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"”
Update: Code pushed to [LINK] Initial Post: I know there are hundreds of threads out there, some had typos in webpack config, some used the loaders in a wrong way, some got it solved, some still open. But after numerous tries I still cannot get this working, a simple "Hello World" using Webpack 4, React js. What I did I was following this video tutorial line by line: React & Webpack 4 from scratch [this video] My package.json { "name": "my_react_experiment_2", "version": "1.0.0", "description": "Basic react with webpack ", "main": "index.js", "scripts": { "dev": "webpack-dev-server --mode development --hot", "build": "webpack --mode production" }, "author": "Souvik Ghosh", "license": "ISC", "depe
Cites learnerforlife · 2019-05 · Stack Overflow · on “Webpack warnings on page reload”
I'm getting warnings in my console when I save changes or reload my React application and its also very slow when reloading Instead of using create-react-app, I followed along on Traversy Media's video [this video] of setting up webpack from scratch. It was actually working fine for the first few days but suddenly started acting very slow whenever my application reloaded after saving. These are the console warnings that display for second but then disappear once the application reloads: [HMR] Cannot apply update. Need to do a full reload! [HMR] Error: Aborted because ./src/Components/Layout/Home.js is not accepted Update propagation: ./src/Components/Layout/Home.js -> ./src/Components/App.js -> .
Cites kakakakakakakk · 2020-09 · Stack Overflow · on “Error: Cannot find module - webpack-dev-server.js”
I am building a react app from scratch. Usually, I am running the npm create-react-app and it generates everything for you. I am following this tutorial [this video] and it has the GitHub repository in the description. The problem is - when i run "npm start" it should run this command webpack-dev-server --mode development --open --hot which is written here in the package.json "scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "./node_modules/.bin/webpack --mode production" }, The command works if I am running it manually, but with npm start, it gives the following error PS D:\React&Webpack4 boilerplate> npm start > react-webpack4-boilerplate@1.0.0 start D:\React&