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.
Related
I'm using Turborepo to build a Typescript monorepo which contains a number of packages that make up a UI framework. The first component is a very basic multi-panel display that is transpiled to ES6 using tsc. The package transpiles and builds correctly, but when I attempt to import one of the JSX components from the package, I get the following error.
I'm pretty new to working with monorepos, so I'm sure there's some configuration somewhere I've missed, but this is working with Turborepo out of the box and I'd been hoping that it would Just Work. The repo structure is the default Turborepo structure but I've attached that anyway in case I've missed something there.
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?
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
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.
I'm trying to find a client-side computer-vision library that plays nicely with React. I've tried tracking.js and js-objectdetect but I can't import them into a standard React component without major efforts that are beyond my skills.
The problem with both these awesome libraries is that they are written as IIFE with no export statements e.g.
(function(){...})()
They are supposed to be imported as <script src = 'etc'> so I can't seem to just import them as normal and follow the API without getting
TypeError: foo.bah is not a constructor
I tried adding my own export statements but a can of worms exploded out of it!
Can anyone suggest a better approach?
If you are using webpack you can try exports-loader to allow you using import syntax.
Here is some more info.
Here is a working implementation of tracking.js with React (using create-react-app)
https://github.com/howardkitto/react-tracking
The solution was provided by https://github.com/gaearon, here... https://github.com/facebookincubator/create-react-app/issues/2958