Help with NPM/node version and Webpack CSS issues

Hi,

I apologize this will be a long thread.

  1. Our Rails app is currently deploying with Capistrano on EC2 built by a freelance dev who is no longer available

  2. We wanted to integrate continuous deployment with Circle CI

  3. We upgraded node from 7.8 to 8.0 and tried to deploy but had some errors
    `SSHKit::runner::ExecuteError: Exception while executing: npm exit status: 254 (see photo)
    https://ibb.co/cn9tWy

(There may be other errors)

  1. We then downgraded node 7.8 (without changing anything in the code or deployment method). Then we got 2 errors:

Error 1

npm ERR! path /home/ubuntu/app/freelensia/releases/20180520163355/client/node_modules/customfile-loader
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access ‘/home/ubuntu/app/freelensia/releases/20180520163355/client/node_modules/customfile-loader’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2018-06-20T11_40_37_197Z-debug.log

https://ibb.co/d6KMJd

Error 2

1> customfile-loader
2>
Debug …
throw err;
^
Error: Cannot find module ‘postcss-custom-properties’
at …

https://ibb.co/ijUABy
(the right part of this photo is the error. the left part is the successful deployment before)

  1. After that we tried to run

npm run build:client

because this line of code was commented out by the dev who built the Cap deployment. We also tried to add 2 libs to client/package.json of source code. After this we could finally deploy, but now the header of our website is broken (see staging.freelensia.com)

  1. We tried to inspect the css element in the browser and I see that some different about CSS coding styles from production server & staging server
    prod link: https://www.freelensia.com/assets/app-bundle-c8936163bce372906adbc9d590331f35b402a3971cba17cff6e9d420673567e5.css
    staging link: http://staging.freelensia.com/assets/app-bundle-b741f431cc69f7c694b047ff885e2e9a403e87bf1ea9ada79223c8b2f79ca21c.css
    Below are 2 screenshots about some different CSS coding styles from 2 servers
    Staging: https://ibb.co/b8viWy
    Production: https://ibb.co/ezz5dd

Sorry for the lengthy message, but the error that remains seems to be the CSS issue above. Do you have any ideas where we should look at? Also, do we have any specific symlink to public/assets/app-bundle or Are we missing of any steps for this?

@karibu @zenik @111 ?

Thanks !