Since I started using NextJS, I've grown quite fond of styled-jsx (I know, not everyone likes it). I'd love to use it in my create react app. Locally it works great. However, react shows me the error:
Warning: Received `true` for a non-boolean attribute `jsx`.
To my understanding, this means that the code does not get transpired by babel. I would need to add the babel plugin to my Create React App Babel config - which isn't possible without ejecting.
I've also read about react-app-rewired but I don't trust it enough to put into production. Is there a more native way to use styled-jsx in my create react app project?
I just happened to answer this in details under another question :) Hope it helps
https://stackoverflow.com/a/66285652/511908
According to the styled-jsx docs, it can be used in create-react-app by using the css.resolve function provided in styled-jsx/macro. Read about it here.
I think this is the intended use but I could not get it working:
import css from "styled-jsx/macro";
export function Login() {
const { demoClass, styles } = css.resolve`
label {
color: green;
}
`;
return (
<label className={demoClass}>Test</label>
);
}
Even if this did work, I dislike it and would rather use styled components or CSS modules (built into CRA, by the way). This is nowhere near as clean as the normal styled-jsx code.
It seems that styled-jsx just does not work well with CRA without ejecting. If you do get it working please let me know, but right now I am going down the CSS modules with Styled Components route.
Related
I am trying to render my REACT components via SSR with REACTJS.NET in ASP.NET project.
In the JS file for SSR, I'm importing SimpleBar component from simplebar-react package.
This is causing the error TypeError: Object doesn't support property or method 'forwardRef'.
I currently have 2 JS files, one for server and one for client. In the JS for server I am removing the adding of event listeners and similar. However, I can't get away from importing at least the npm package in both JS files.
Any idea on how I can avoid such error?
I am using Webpack + REACTJS.NET version 3.2.0.
So, after trying a lot of things, this is the best solution I came across.
Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.
Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.
In Webpack I am creating a plugin:
And in code, when I want to import the Simplebar react component, I do the following in the constructor:
And then, whenever I want to use my imported component, I do the following:
This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.
Does anyone know a better solution? Or do you have concerns?
I had a certain bug that I was unsure how to debug. The bug is that styling that I use for a create-react-app (Typescript) app through material-ui and regular CSS, shows up just fine in development but it shows differently for certain CSS properties when I deploy the app online (I've only tried Heroku and Vercel). The app doesn't show any errors or warnings in the console when I'm developing. I have no idea why it's happening and I've tried the following so far
Read through my code many times being extra careful at every step.
Open the website (development and production) in incognito mode on Chrome 85.0.4183.83 (Linux, 64 bit)
Look through the documentation for material-ui (material-ui.com) and the React docs for any lead on this
Search google for prior such issues
So far, nothing has turned up. Could someone please guide me in the right direction?
The build pack I use on Heroku after deployment is the well known one by mars and available at https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz .
For convenience, I have included my package.json here on pastebin.
Thank you so much for helping out.
============= EDIT =============
I've been experimenting with the code and it seems like the problem lies with how material-ui is compiled during build time. The problems which don't show up in development, show up in production.
For example, the biggest thing I noticed is if you mix custom style prop flags given by the material-ui components and add your own styling with className or style, during build time these latter styles are overridden partially if not completely.
So if I do
import React,
{ useRef } from "react";
import {
Button,
makeStyle,
Theme
} from "#material-ui/core";
/*
Start of functional component using memo
.
.
.
*/
const useClasses = useRef(makeStyle((theme : Theme) => { return {
buttonStyles:
{
backgroundColor: theme.palette.text.hint
}
}}));
const styles = useClasses.current();
<Button
color={"secondary"}
className={styles.buttonStyles}>
button text
</Button>
/*
.
.
.
*/
in development, the button will have the backgroundColor I give it in makeStyles, but in production that property will switch to secondary as given in the color prop which defaults to the value theme.palette.secondary.main.
And sometimes, just even using a component from material-ui without any extra config causes a problem.
I am also using code splitting with lazy and Suspense if that matters.
StackMatch can you please link your github/gitlab repo? I think I might know what the problem is but can't be certain without seeing how your dev environment is configured.
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.
I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)
Trying to get decorator syntax working for react css modules as shown here.
https://github.com/gajus/react-css-modules#decorator
I've got react-css-modules working using the function syntax, e.g.
CSSModules(Table, styles)
but when using decorators, e.g.
#CSSModules(styles)
export default class extends React.Component {}
nothing seems to be instantiated and no errors are thrown either. I've got the babel-plugin-syntax-decorators loaded.
What could I be missing? Thanks!!
I wasn't able to use that syntax too. It seems that react-scripts uses some babel plugin for running typescript, and that plugin isn't much typescript. So if you're using react-scripts with typescript, consider that it's not "full" typescript, and there is some stuff not working as you could expect.
Also, you can consider using patch-styles instead of react-css-modules. It's much simpler, doesn't require any changes in your project at all, and PatchStyles provides the same with a lot simpler react component.