[BUG] Update breaks packer on Mac OS

[fcisio]

Describe the bug
Upon Upgrading packer to the latest version, HMR doesn't work anymore.

Firefox throws CORS issues.

Meanwhile, Chrome sees the certificate as valid, but is still "Not Secure".

To Reproduce
Steps to reproduce the behavior:

Use a starter on mac os

Expected behavior
HMR should work

Screenshots

System (please complete the following information):

• OS: Mac OS Big Sur
• Node Version 14.15.4
• NPM Version 6.14.10
• Browser chrome, firefox

Packer (please complete the following information):

• Version 2.1.3

[fcisio]

The last working version that works for me is 1.3.8

My current workflow consists of:

• packer v1.3.8 (locally)
• packer v2.0.1 (globally)

Then I use v1.3.8 for dev yarn packer start
And v2.0.1 to deploy packer deploy --nodelete

So less than ideal haha

[seeReadCode]

Version 1.3.8 appears to be the last working version for me as well. Also on mac, not sure it's mac specific.

I don't use localhost:3000 typically because I have sites with hard redirects so the localhost proxy always grabs the live theme.

But at /?preview, the styles never appear to load and the CLI constantly reads Compiling. I tried running the blank theme, same result. CSS never loaded. I've overridden all the SSL stuff and tested on Safari and Firefox as well as Chrome.

[adrianocr]

But at /?preview, the styles never appear to load and the CLI constantly reads Compiling. I tried running the blank theme, same result. CSS never loaded. I've overridden all the SSL stuff and tested on Safari and Firefox as well as Chrome.

I thought it was just me! 1.3.8 is also the one I'm having to use because anything later has issues on my machine.

Ever since Webpack 5 was introduced, CSS and JS don't seem to load. I can confirm that a <script> tag and a tag are being inserted before but the JS doesn't evaluate (even though the JS file(s) do contain code) and the CSS file is blank for whatever reason.

I'm also on macOS so that seems to be the common theme here. Don't really see why that would be an issue though.

[hayes0724]

@adrianocr @seeReadCode @fcisio I think this is a macOS issue with SSL, in v1.3.8 the method for using and creating SSL was changed. I unfortunately don't have a mac to test on so this is taking a while to debug.

[hayes0724]

@adrianocr @seeReadCode @fcisio Just released v2.2.0 which make setting up SSL easier, especially on MacOS.

Updated docs for SSL

Steps to fix after update

1. Make CA and issue SSL cert packer ssl:make
2. Confirm it was created packer ssl:check
3. Follow MacOS instructions to trust the CA

MacOS - trust ca

1. Click the CA cert file ca.crt located in ~/.localhost_ssl
2. Click add
3. Find it in Keychain Access and double click it
4. Expand 'Trust' and change 'When using this certificate' to 'Always trust'
5. You may be prompted to authenticate
6. Restart packer
7. Restart browser