I have successfully managed to render a React component inside of ember.
You can see the relevant code here.
The basics being adding an addon, that uses the preprocessTree hook, to use broccoli-react to parse the jsx files as per here. And a ReactComponent (which is an ember component) to wrap any react component.
This works well in ember cli 2.11.0 and 2.12.0, but in 2.13.0 and 2.14.0 something has changed and I can't figure out what.
I have narrowed the error down to this line in ember-resolver, for some reason this._moduleRegistry in the newer versions don't have the react component but the older versions do...
Any ideas?
I uninstalled everything node. And started matching package versions 1 for 1 from the newer app into the older one, and it all works.
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?
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?
This problem is killing me, but I keep getting this error when I compile and run (I am using .NET Core 3.0 with react app):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The error points to my ../src/index.js file:
Here is the error displayed
Here is the code that is flagged with the invalid hook call error
I'm not sure what's going on, i spent the past 3 hours trying to fix it but I just can't get the homepage to show.
I understand the hooks error, but I don't understand why its getting called.
I have the matching versions of React and React DOM, 16.13.1
For my react components, I use classes.
I'm not sure how to check for different copies of react
I'm quite new to React so maybe i misunderstood or messed up somewhere, please help me here, thank you.
EDIT:
Check if redux is installed on the client. This error occurs when it isn't installed on client directory but server directory.
check package.json of client.
Maybe a crazy solution but in my case nothing was actually wrong with my code. I was going nuts trying to find the error. But what actually helped, was upgrading the version of Typescript installed in my project from 4.4 to 4.9. Don't see any evident connection but after the upgrade everything worked like a charm. :)
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 ngNewRouter (now named ngComponentRouter) was supposed to be in 1.4, but was delayed and is now supposed to go into 1.5 (as I understand it). However, it's not in the 1.5 beta2 package. I do see angular1_router on github, but I don't see that built module included in the 2.0 alpha packages either.
Does anyone know if the new router will actually be in the 1.5 release?
Is there a current build of the new router hosted anywhere? I managed to find a copy of the compiled js from a random plunker, but haven't been able to compile the source myself (issues with node-gyp & msbuild, still working on that).
Does anyone know of any up-to-date documentation or working samples on the new component router? The best site I've found so far is pretty close (it says it was published in February, but it uses ngComponentRouter rather than ngNewRouter so it's clearly being updated), but the post still has things wrong - like it says to create controllers for the components you're loading for the routes, but I discovered that you actually need to be creating them as directives (optimally using the new "component" wrapper in 1.5) with the restrict set to "A" (that was fun to figure out).
You can get the new router via npm with:
npm install #angular/router
For more information on the current API you can have a look at:
https://angular.io/docs/js/latest/api/router/Router-class.html
It's for Angular 2 but the core mechanics of the router are the same, and it should give you some hints on how the API has been changed compared to the ngNewRouter.
It looks like the component router has been released. Here is the official documentation: https://docs.angularjs.org/guide/component-router
I'm not seeing any official announcements saying it was released yet though, so I'm not sure if it's supposed to be "official" or not.