Browser keeps loading "old" version of js files

[NickSevens]

When running npm start, a browser is launched to http://localhost:8000/webpack-dev-server/ (which is expected).

Then, when changing anything in code, for example in the Main.js file, nothing happens in the browser.
Worse even, when refreshing the browser window, the changes made to the source code are not reflected at all.

Is there anything else I need to do to get this working? Extra watch/build commands to run?

Thank you

[weblogixx]

Hi @trickass,

which version of the generator do you use? I have expected something like this too, but only with the current beta (where it is fixed, too). Make sure your webpack configuration does not have a key of cache: true set.

In the current stable, watch files in the cfg directory, in the beta it is located in config/webpack.

[NickSevens]

I've only installed the generator today via npm install -g generator-react-webpack.
It seems to be using version 3.3.2.

I've tried setting the cache: false as it was indeed on true in the dev config, but seems to make no difference.

[weblogixx]

Hi @trickass,

I just tested it with a newly generated project (even uninstalling the generator and reinstalling it again) and did not have any problems. Could you give me some more information?

• Operating System
• Version of node you run on (and install type, e.g. native or nvm/nvwm)
• Version of npm

Also, altering the the cache key is not required (at least under osx), it does not have an impact.
Which browser did you try to open the page with? Does it have any errors in the console?

A valid console after a request should look like this:

[NickSevens]

I'm running Windows 10 with node (native, i think?) v6.2.1 and npm version 3.9.3
Opened the page using Chrome.

Also, is it enough to do "just" npm start? Or should I run another command as well at the same time?

Running (npm start) provides following result:

[weblogixx]

Seems fine from a setup side of things. You do not need to run anything else, just a regular npm start.
Unfortunately I do not have a windows 10 vm to test it, will take some time. There are no problems on Windows 7 and I did not get any reports that there are known problems with Win10.

I will check it, but it will take some time. Did you get any output in your command line when altering main.js? Could you please paste the output of your npm start command (including changed output after you changed Main.js)? Maybe we can see something wrong there.

When the server is started and you change a file in the src directory, it should add a line like this:

webpack: bundle is now VALID.
// EDIT!!! THIS IS FROM THE PREVIOUS RUN WHEN WEBPACK IS READY
// PLEASE SAVE THE FILE IN YOUR EDITOR NOW, e.g. by adding "test" somewhere...
// EXPECTED OUTPUT:
webpack: bundle is now INVALID.
Hash: d624dc1b83867b5f354f // WILL BE DIFFERENT ON YOUR SYSTEM
Version: webpack 1.13.1 // MAY BE DIFFERENT ON YOUR SYSTEM
Time: 489ms
 Asset     Size  Chunks       Chunk Names
app.js  xxxx MB       0       main
chunk    {0} app.js (main) xxxx MB
.... // LONG LIST OF DEPENDENCIES
webpack: bundle is now VALID. // After saving, this should be the last line again!

[NickSevens]

Nothing is added there when updating, so I guess there's something going wrong on that level already...

Output from npm start command:

npm start

>[email protected] start C:\Projects (Personal)\TEST
>node server.js --env=dev

Listening at localhost:8000
Opening your system browser...
webpack: wait until bundle finished: /assets/app.js
Hash: 4db2d6e5c14459d227d4
Version: webpack 1.13.1
Time: 4028ms
                               Asset     Size  Chunks             Chunk Names
42092f929161dae9c08a21bfb46ece4d.png  13.5 kB          [emitted]
                              app.js  2.62 MB       0  [emitted]  main
chunk    {0} app.js (main) 930 kB [rendered]
    [0] multi main 52 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://127.0.0.1:8000 2.67 kB {0} [built]
    [2] ./~/url/url.js 22.3 kB {0} [built]
...
  [299] ./~/react-hot-loader/isReactClassish.js 801 bytes {0} [built]
  [300] ./~/react-hot-loader/isReactElementish.js 288 bytes {0} [built]
webpack: bundle is now VALID.

[weblogixx]

In this case it does not seem to be a problem with the generator, but maybe with the webpack dev server. There are some known issues from windows 8/10 users that I found here: webpack/webpack-dev-server#155.

For example, if you got any special chars in your absolute path you seem to be screwed...
One user suggested to use git bash for windows where the problem (possibly cmd.exe related?) does not come to pass.

[NickSevens]

I tried running it in git bash, but doesn't make a difference... I'll see if I can get some help in the webpack issue...

[weblogixx]

Do you have any special chars in your path? If you have, try to move to project to a main folder (e.g. c:) directly and use folder naming without special chars (e.g. whitespaces, slashes...). Have a look if it works on this folder (like, move it to c:\test). Maybe this may help.

[NickSevens]

I retried from "C:\Projects\Test", so no special chars there.

What I did notice just now, when re-running the generator, is this:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Could it be that a windows alternative for this should be installed instead?

[NickSevens]

All right!
I've found the issue!

On https://webpack.github.io/docs/troubleshooting.html I found this:

webpack expects absolute paths for many config options. __dirname + "/app/folder" is wrong, because windows uses \ as path separator. This breaks some stuff.

Use the correct separators. I.e. path.resolve(__dirname, "app/folder") or path.join(__dirname, "app", "folder").

I changed line 23 in cfg/base.js to contentBase: '.\\src\\', which seems to do the trick!!

(all while not in a 'special character' folder)

[weblogixx]

Hi,

I will add a cross system fix for this. Should be easy to use /on unix(likes) and \ for win. Thank you for the hint!

[NickSevens]

No problem. Thanks for your help as well.

Quick side question... I cloned the repo to see if I could fix it myself, but, where do I even find the base.js file (and other generated files)?

[weblogixx]

Hi @trickass,

those are located in a dependency here