Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatibility with GatsbyJS? I have problems to make builds to production, the components are not seen with the style. #411

Open
ChristianHardy opened this issue Sep 5, 2023 · 0 comments

Comments

@ChristianHardy
Copy link

🐛 Bug Report

I am experiencing problems when using this library on a clean and fresh installation of GatsbyJS.

The project looks fine when it is being developed, but when a build is done and the project is executed it does not show the styles of the components.

I have created a public repository, if you can download and run the project npm run start you can see on the localhost:8000 page that the navigation bar is displayed correctly, attached screenshot.

For more contect here is my Navbar component https://github.com/ChristianHardy/gatsby-xstyled/blob/main/src/components/Navbar/index.tsx

image

But if you make a build and then run that build: npm run build; npm run serve you can see that the web does not load the styles, if dimensions, heights or responsive styles, I upload screenshots with my results.

image

But if you navigate between the two pages you will see that the styles are loaded later.

image

To Reproduce

  1. Clone the repository given
  2. Install the NPM modules running npm run ci
  3. See the project running locally npm run start
  4. Go to localhost:8000 on any web browser and you will be able to see the navbar styled
  5. Stop the previous process, build and serve locally the project running npm run build; npm run serve
  6. Go to localhost:9000 on any web browser, you will see the navbar unstyled
  7. Use the navbar to navigate to another view, example contact and see how the navbar its styled now, even if you navigate to home again the style will still loaded.

Expected behavior

The components created with xstyled needs to keep the style even if the project its compiled for production environments

Link to repl or repo (highly encouraged)

https://github.com/ChristianHardy/gatsby-xstyled

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 14.0
 - CPU: (10) arm64 Apple M1 Pro
 - Memory: 74.63 MB / 16.00 GB
 - Shell: 3.6.0 - /opt/homebrew/bin/fish
## Binaries:
 - Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
 - npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
## npmPackages:
 - @xstyled/styled-components: ^3.8.0 => 3.8.0 
 - styled-components: ^6.0.7 => 6.0.7 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant