Init loading issue/ white map field... compiling problem? css minimizer plugin issue?

[traveller195]

Describe the problem
Ater compiling a new production build, sometimes the following problem occures:

• within IOR intranet: page loading is without problems
• outside: for initial loading of Colouring Dresden platform: the map field is only white without base map layer...
• after click on one of the coloured data categories everything works fine and map is shown including buildings, legend etc.

Warning in production build compiling:
Css Minimizer Plugin: Ignoring local source map at "bootstrap.min.css.map" as resource is missing.

More information
maybe compare: pkp/healthSciences#117

[traveller195]

problem sometimes initial loading of main page (with welcome text)

after click to one of the coloured data categories... the map will be shown as well

[traveller195]

error messsage shown in firefox dev tools on console (while the white map problem happens)

in the last days, this problem could be "solvec" as a workaroung to just do a production build again... but now, also several new production buildes could not fix it...

[traveller195]

maybe broken production build? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token

[traveller195]

https://stackoverflow.com/questions/32031255/syntax-error-expecting-expression-got-while-trying-to-run-reactjs-tutoria

[traveller195]

maybe this could be helpful
btholt/complete-intro-to-react-v4#3

[traveller195]

this could be the proper answer to this issue:
https://stackoverflow.com/questions/53106643/syntax-error-in-react-app-only-on-first-load

I think the problem is cache + some non-existing script file.

1. If a local script file is missing it will probably handle it as a regular React application request and will return something starting with , why you get the SyntaxError as it tries to parse the response as JS.

2) Additionally I think it has something to do with caching some parts of the application. Probably on your deploy you remove the old files, but the application is still looking for the old files with some previous hash: main.XXXXX.js. But during the deploy you removed those files completely and uploaded new scripts: main.YYYYYY.js.

Check the developer tools that all scripts return the expected JS file response and in case any of them are missing make appropriate changes to your cache headers and/or deployment scripts.

[traveller195]

with white map issue (firefox dev tools for network analysis)

with second load... it succed. Compare differences of loaded JS files (there is an old version of compiled JS in browser cache?)

so, it could be more a caching problem of client after a new deployed build. not a compiling issue of prod build!

[tomalrussell]

Hi @traveller195 - I think it’s super helpful leaving your notes and learning here, keep going!

Because you say the error only occurs outside the intranet, I would look at the gateway server cache behaviour again, as suggested in the SO answer you link to above.

The production build produces new JS/CSS files with a short random string in each filename. The HTML served from the app (and NGINX) then refers to the new files. If the gateway server is serving cached HTML responses, the browser will try to request the old JS/CSS, and may fail. Once the gateway cache is refreshed, the problem would go away.

The warning about a missing source map is just a warning, and can be ignored as long as you don’t need to inspect the bootstrap CSS in production.

[traveller195]

further solutions:

• restart all of pm2
• avoid caching in gateway