webpack_config | basic react app with no flux , and a webpack config | State Container library

If you want to expose functionality from your bundle then you need to output as a library:

Update your development.js. The constant config should go after environment.plugins.append. For example:

There are many problems with the code above. One major issue that makes the code hard to follow and debug is that you use new Promise where you don't need it. Generally, if you have new Promise and the logic inside the promise executor will resolve or reject depending on the result of another promise, then you don't need to use new Promise.

Sometimes people have code like this:

Rebuilt app using NPM instead of Yarn and it deployed without issue and is running fine now. Thanks for the help!

What you need is process.argv not process.env:

First of all, don't put your "npm run build" step in your Procfile. Doing so will cause that step to run every time your web dyno restarts, which is not what you want.

Instead, you want to run webpack (or whatever else you need for making sure the dependencies you need are present in your app) during slug compilation.

By virtue of the fact that you are using the heroku/node.js buildpack, it will automatically take care of running "npm install" for you (or yarn install, if you choose to use the yarn package manager instead).

However, if you need more than npm/yarn install (e.g. if you need to run webpack to bundle client dependencies), then you need to provide the slug compiler with additional instructions for those steps. A good way to do that is by using heroku-specific build steps.

So, for example, you might want to run webpack in a heroku-postbuild step in your package.json "scripts", e.g.:

As of webpack version 3, you can use a webpack.config.babel.js instead of the same thing w/o '.babel' and happily put ES6 inside it (fancier import statements, const, etc...) right away.

Let's say, this feature is not over-documented.

Let me share my (vague) research with you:

According to this slighly related answer, babel uses interpret which „require dependencies for configuration files“.

Apparently without, webpack could not use ES6 for the javascript in your webpack.config files. (And since webpack is mostly needed, to transpile ES6 to ES5, you'd have a darn hen-and-egg problem, if webpack configured itself required some webpack transpilation before...)

Many projects, including popular ones, do this:

• having no webpack.config.js
• using a webpack.config.babel.js containing ES6 (telltale sign:import) instead and right away...

So that seems established best practice for ES6 webpack configuration files, then? Seems so, though I couldn't find that in the webpack documentation, apart from a short feature discussion.

Btw: The mentioned interpret package at least nowadays comes already with webpack 3.x. No need to install anything in addition:

The problem I don't think is Webpack's fault. I've noticed these speed problems occur when I had Django serve my React files. When you use Django, your files are served by the Django server, and that inherently is pretty slow compared to the webpack-dev server. The whole communication process between webpack dev server to Django can be time taking, which has to have the Django server to trigger a change and then re-serve the static files again.

One solution to this would be to isolate React front end code from the backend code and have your React consume your Django's REST API. It runs extremely smooth and reduces a lot of load on the server.

I've tried multiple things to fix this, I thought some settings fixed it but reverting back to previous versions suddenly started working too.

At the end, i think the fix was simply: