Hey love your blog post and this repo, thanks!

It looks like the new version of react-hot-loader doesn't need the .../patch entry point anymore:

See https://github.com/gaearon/react-hot-loader#no-patch-required

I removed it and it worked for me.

Cheers!

hello @rwieruch ,
nice work and good tutorial but i am facing some issues
on local i make the neccesary change for the build

"scripts": {
		"dev": "webpack --mode development",
		"build": "webpack --mode production",
		"start": "webpack-dev-server --config ./webpack.config.js --mode development",
		"test": "echo \"No test specified\" && exit 0"
	},

but on live is not working here is the url http://react.myseminars.com.cy

@ start D:\git\Never-Blink
python server.py

WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance.
Traceback (most recent call last):
File "server.py", line 226, in
keyfile=os.path.join('backend', 'server.key'), certfile=os.path.join('backend', 'server.crt'))
File "D:\Python36\lib\site-packages\flask_socketio_init_.py", line 537, in run
use_reloader=use_reloader, **kwargs)
File "D:\Python36\lib\site-packages\flask\app.py", line 841, in run
run_simple(host, port, self, **options)
TypeError: run_simple() got an unexpected keyword argument 'keyfile'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: python server.py
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ 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\Administrator\AppData\Roaming\npm-cache_logs\2019-07-30T10_28_23_595Z-debug.log

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

just followed the setup and am getting this error.

any suggestions on how to resolve?

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
);

module.hot.accept();

update:
works if you remove the div brackets and {} around title

Hi,
Thanks for your boilerplate.
if you add a dot before '/bundle.js' we will be able open the html file directly (without a local server)

Please do

instead of

Thanks

Great webpack 2 config. Do you have a build script also, that fills that dist dir?

Can you update your documentation to include the new @babel/* packages?

Thanks,

Maybe it is time to update the boilerplate project to Webpack 3. I would love to keep it minimal like it is right now, but just with the necessary technical upgrade under the hood. In another repository there has been such an upgrade to Webpack 3. Maybe it's a great blueprint to upgrade this boilerplate project too.

• upgrade minimal-react-webpack-babel-setup to Webpack 3

Maybe in a follow up PR I can upgrade the documentation for it too:

• The Minimal React Webpack Babel Setup
• React Code Style with ESLint + Babel + Webpack

Hi, great work on the boilerplate. I'm just curious, is the file "package-lock.json" needed in youre repo or should it be removed?

hi

i changed in index.js in src folder. after i run th command - npm start. After that nothing changes.
plz reslove this issue.

Regards,
varinder pal singh

I was trying out this setup with codesanbox.io but it throws an error. Do you have any ideas why this might be the case?

Thanks

P.S. the error is:

Invariant Violation
Target container is not a DOM element.
▶ 3 stack frames were collapsed.
evaluate
/src/index.js:6

  3 | 
  4 | const title = 'My Minimal React Webpack Babel Setup';
  5 | 
> 6 | ReactDOM.render(
  7 |   <div>{title}</div>,
  8 |   document.getElementById('app')
  9 | );

This is excellent! Thanks for setting it up. Do you think you could incorporate copy-webpack-plugin so that dist folder is not checked in?

https://github.com/webpack-contrib/copy-webpack-plugin

Hi @rwieruch,

Thank you for the content and the setup you've created but I see that this configuration even it's minimal needs some Webpack plugin to handle images, CSS, and fonts to make more useful.

So whenever I run npm start, it compiles but doesn't watch for any changes to any of the files. Even if I change something in index.js, it wouldn't update on the site (running at localhost:8080) even after reloading the page. I feel like the changes are not being watched for. Any way to fix this?

I did a clone and did "npm run start" and got this:
npm run start

[email protected] start C:\minimal-react-webpack-babel-setup
webpack-dev-server --config ./webpack.config.js --mode development

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 i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:549
throw err;
^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
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. (C:\Users\Ilene\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --config ./webpack.config.js --mode development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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:

Your .github folder contains your patreon link which gets cloned