I am using "linaria": "^4.1.10" and "next-linaria": "^0.11.0" in my Next.js app. I have followed the configuration on this repo. In my app the pages which are not using getServerSideProps are working fine with above configuration, but the pages having SSR approach are not working fine.
Errors such as
Cannot read properties of undefined (reading 'localeCompare'),
EvalError: Cannot read properties of null (reading 'spawn')
comes up in the SSR components during build time.
Any help with the setup of Linaria with Next.js for SSR pages will be amazing to have. Or if you guys can point me to the correct docs.
I have tried the other setup on the Linaria docs, I have also tried the Next.js Example for Linaria.
Nothing seems to work for me.
Related
None of my react components render when I use github pages. My CSS seems to work (I can see the background pattern) but none of my react components render. Everything works fine locally, but it does not when I use github pages. Here is a link to my repo: https://github.com/GibbsV3/MySite
I have tried using the Router component but so far I cannot figure it out. Is there something wrong with my index.html file?
Github pages works for static pages.
But react is not static page. Your index.html file interacts with javascript and adds contents, components.
There are some ways you can deploy react-app to github pages but I would recommend using vercel or netlify
You have to build a static page before deploying it to the GitHub page. Follow this LogRocket article.
This is the link to my GitHub project, see the directory structure: https://github.com/SutirthaDey/crowdcoin
app link: https://crowdcoins.netlify.app/
I have used react,nextJs, and next routes for dynamic routing. The problem I'm facing is after deploying it using netlify, everything is working fine but when I do a refresh, it's showing 404 pages not found(except the main index.js page/landing page). I don't know whether I was doing it appropriately but tried several things like using netlify.toml and _redirects but nothing really worked. Other than the refreshing part, everything is working fine.
I was stressing out for days over this its such unique problem that I couldn't find the answer too anywhere. I also followed the same Solidity tutorial as you and unfortunately the tutorial is very out of date so a lot of things don't really work. I had the exact same issue as you when trying to build on netlify. It took a while to figure out but basically the next-routes package does not work with netlify. So you will have to set up your routes just using vanilla Next.js. So delete the server.js and routes.js files then search up how to create routes using Next.js I would suggest these tutorials they are very good! Next routes tutorials. Hopefully this helps others I don't want anyone else to go through what I had to go through lol
Recently i have developed a storybook. Now, i want to attach it to another project which is developed using next.js. Storybook uses it's own routes whereas my next.js application has it's own routes. I want to manage all the routes using next.js and override storybook routes.
Let say my application runs at:
localhost:3000
and i want to add the storybook at
localhost:3000/storybook
How can i tell next.js that on this route a build of storybook is to be served or i can control the routes of stroybook. Is there a way to achieve that?
From what I've seen, the recommendation is usually to run Storybook on another port locally. If you want your Storybook accessible to the public, I would recommend doing a URL like storybook.your-site.com or ui.your-site.com.
Related: https://github.com/storybookjs/storybook/issues/5975
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
The particular use case I'm looking at is running a single page application at the root path / of a domain, and having a statically rendered blog at /blog.
I've already checked out the advice at https://www.gatsbyjs.org/docs/path-prefix/, however I'm not entirely sure how this would interact with the React app running at /
Is there a way to get React Router in the React app to support handing over to Gatsby?
Gatsby is just React so yes :-)
Build your SPA & blog both with Gatsby. Put the entry to your SPA at src/pages/index.js and it'll be served at /.
If you need client-only routes, you can set those up like this: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes
Gatsby is basically CRA with some additional features to make it easy to build websites.