website-v2 CSS not loaded in local environment

CSS not loaded in local environment

Open Dexalt142 opened this issue 2 years ago • 17 comments

Hello, I forked this repo and cloned it into my computer and ran yarn install. All deps installed and yarn.lock hasn't been affected. After all the deps are installed I ran yarn dev. Files built, development started with no errors.

The issue is every time I opened localhost:4000 in my browser the CSS is not loaded. Are there any steps that I missed? Thanks.

Jan 16 '22 11:01 Dexalt142

Hi @Dexalt142 I can't reproduce it and have never experienced that. Are you on main branch and are you sure you have no changes? I would suggest removing node_modules/, .nuxt/ and retrying yarn ; yarn dev :shrug:

Anyone else having this issue?

Jan 18 '22 11:01 smarroufin

Hi @Dexalt142 Can you tell us more about your development environment?

Which browser were you using and the version
Node/npm and yarn version
What operating system are you using
Does your browser have any extensions that you suspect are blocking CSS?
Your terminal doesn't show any error?

Jan 19 '22 13:01 felipe-heredia

Hi @Dexalt142 I can't reproduce it and have never experienced that. Are you on main branch and are you sure you have no changes? I would suggest removing node_modules/, .nuxt/ and retrying yarn ; yarn dev 🤷

Anyone else having this issue?

Yes I'm on main branch and I have no changes. Already tried removing node_modules/, .nuxt/ and ran yarn install, yarn dev several times but still no luck.

Jan 19 '22 17:01 Dexalt142

Hi @Dexalt142 Can you tell us more about your development environment?

Which browser were you using and the version

Node/npm and yarn version

What operating system are you using

Does your browser have any extensions that you suspect are blocking CSS?

Your terminal doesn't show any error?

Google Chrome 97.0.4692.71 and Microsoft Edge 97.0.1072.62
Node 14.17.4 and Yarn 1.22.17
Windows 10 21H1
Nope
No warnings and no errors

Jan 19 '22 17:01 Dexalt142

@Dexalt142 try upgrading your node version to LTS.

Jan 20 '22 00:01 felipe-heredia

@felipesuri Node upgraded to LTS version, installed the deps using npm install instead of yarn install. Unfortunately, I still got the same issue.

Jan 22 '22 14:01 Dexalt142

@Dexalt142 With the LTS version, exclude the folder and clone again, and install dependencies with yarn.

Jan 23 '22 12:01 felipe-heredia

@felipesuri Cloned the repository, I installed the dependencies both with npm install and yarn install, and the issue is still there. I also tried repeating the same process on the other machine and I still got the same issue 😕

Jan 27 '22 07:01 Dexalt142

@Dexalt142 This is so strange. When you run yarn dev and open the site in your browser, see what is on the console and if has an error, send a screenshot, please.

Jan 27 '22 11:01 felipe-heredia

@Dexalt142 I actually thought of something. Do you have an .env file, copied from .env.example? If not, please create it. The missing RECAPTCHA_SITE_KEY variable breaks partners pages.

But I guess this is not your issue. I re-cloned the repo and did not have any issues :disappointed:

Jan 27 '22 12:01 smarroufin

@smarroufin .env file is not the problem, because I tried here and worked without .env. I made the same steps from the description and worked.

Maybe the problem is with Windows, I really don't know.

Jan 27 '22 12:01 felipe-heredia

@smarroufin Yes, I have an .env file.

@felipesuri Yeah I tried this on 2 Windows machines and got the same result, Windows might be the problem. And here is the screenshot of the browser console.

Jan 27 '22 12:01 Dexalt142

@Dexalt142 Can you try running the app on Firefox Browser?

Jan 27 '22 12:01 felipe-heredia

@Dexalt142 Everything works fine for me on Windows 11 with WSL2. I'm using Brave Browser wich is chromium-based.

Furthermore, I have exactly same outputs in my browser console.

Could you inspect an element (Right click => Inspect) that should be styled (any text should be fine) and check Styles panel ?

When it's working it says that the CSS classes are defined within a <style> tag, you can click on it and it jumps in the page html source code to show you where the CSS is defined.

If the CSS is here, it can be a browser issue, try disabling all extensions and also try with a different browser. If the CSS isn't here, it's pretty hard to know yet what's going on right now without being able to reproduce it but we'll try our best to figure out with the information you provide.