Render isomorphic React component which requires window object - javascript

I have an isomorphic React application, with components being rendered on the server-side. I wish to use a 3rd party React component: (GraphiQL), and am rendering as such:
var GraphiQLComponent = React.createElement(GraphiQL, { fetcher: graphQLFetcher}, "");
router.get('/graphiql', function (req, res) {
res.send(ReactDOMServer.renderToString(GraphiQLComponent));
});
However, this component uses the window object: window.localStorage and window.addEventListener, and when I try to load the page in the browser, I get the error:
ReferenceError: window is not defined
Can I render React components which use the window object, on the server? If so, what do I need to do to resolve this error?

Don't use libraries that depend on window in your components.
or
Only use these libraries in componentDidMount and exclude them for prerendering (make sure your component don't render different in prerendering or it doesn't work).
I figured I shouldn’t import the library outside the class definition, but instead require it in the componentDidMount method or a called method thereof.
So, instead of:
...
import MyWindowDependentLibrary from 'path/to/library';
...
export default class MyClass extends React.Component {
...
componentDidMount() { MyWindowDependentLibrary.doWork(); }
...
}
I did:
// removed import
...
export default class MyClass extends React.Component {
...
componentDidMount() {
const MyWindowDependentLibrary = require( 'path/to/library' );
MyWindowDependentLibrary.doWork();
}
...
}

Yes you can!
Just do not run that piece of code until window is defined!
I also imagine you could use those functions in a componentDidMount() lifecycle function.
if (window !== 'undefined') {
// do your window required stuff
}
I've used this multiple times in components being rendered server-side, and it works like a charm.

Related

Javascript working before page rendering in Gatsby

I try to convert a HTML template (Bootstrap 5) to Gatsby template. CSS and pages working expected but in HTML template there is a main.js file and it need to load after page rendered.
I modify the main.js file like that;
import { Swiper } from "swiper/swiper-react.cjs.js";
import GLightbox from "glightbox/dist/js/glightbox.min.js";
import AOS from "aos";
AOS.init();
export const onClientEntry = () => {
window.onload = () => {
console.log("deneme");
/*rest of code*/
};
};
In here I try two way. One of them, I create main.js file inside src->components->assets->js folder. Then in layout.js I try to import that file.
import React from "react";
import PropTypes from "prop-types";
import { Breadcrumb } from "gatsby-plugin-breadcrumb";
import Header from "./partials/header";
import { Helmet } from "react-helmet";
import useSiteMetadata from "./hooks/siteMetadata";
import "./assets/css/style.css";
import "./assets/js/main.js"
However in here in debug not hit the any method inside onClientEntry. So I decide to change my way.
Secondly, I try to add code inside main.js to gatsby-browser.js. That's time again getting Cannot read property 'addEventListener' of null because of html is not ready yet.
My file structure:
window (and other global objects like document) are not available during the SSR (Server-Side Rendering) because this action is performed by the Node server (where for obvious reasons there's no window, yet) so you can't access directly to onload function. In addition, accessing these global objects outside the scope of React (without hooks) can potentially break React's hydration process.
That said, you have a few approaches:
Using React hooks. Specifically, useEffect with empty dependencies ([]) fits your specifications, since the effect will be fired once the DOM tree is loaded (that's what empty deps means):
const Layout = ({children}) => {
useEffect(()=>{
mainJs();
}, [])
return <main>{children}</main>
}
Assuming that your ./assets/js/main.js file has a mainJs() function exported, this approach will load it when the DOM tree is loaded. For example:
const mainJs= ()=> console.log("deneme");
The console.log() will be triggered when the HTML tree is built by the browser. Tweak it to adapt it to your needs.
Adding a window-availability condition like:
export const onClientEntry = () => {
if(typeof window !== 'undefined'){
window.onload = () => {
console.log("deneme");
/*rest of code*/
};
}
};
Alternatively, you can output the console.log directly in your onClientEntry, depending on your needs:
export const onClientEntry = () => {
console.log("deneme");
/*rest of code*/
};
You can even combine both approaches by adding a useEffect in your gatsby-browser if it works for you.

How can i set variables that i can access globally throught my app? [duplicate]

I initialized i18n translation object once in a component (a first component that loads in the app ). That same object is required In all other components. I don't want to re-initialize it in every component. What's the way around? Making it available to window scope doesn't help as I need to use it in the render() method.
Please suggest a generic solution for these problems and not i18n specific solution.
Beyond React
You might not be aware that an import is global already. If you export an object (singleton) it is then globally accessible as an import statement and it can also be modified globally.
If you want to initialize something globally but ensure its only modified once, you can use this singleton approach that initially has modifiable properties but then you can use Object.freeze after its first use to ensure its immutable in your init scenario.
const myInitObject = {}
export default myInitObject
then in your init method referencing it:
import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)
The myInitObject will still be global as it can be referenced anywhere as an import but will remain frozen and throw if anyone attempts to modify it.
Example of react state using singleton
https://codesandbox.io/s/adoring-architecture-ru3vt
(see UserContext.tsx)
If using react-create-app
(what I was looking for actually) In this scenario you can also initialize global objects cleanly when referencing environment variables.
Creating a .env file at the root of your project with prefixed REACT_APP_ variables inside does quite nicely. You can reference within your JS and JSX process.env.REACT_APP_SOME_VAR as you need AND it's immutable by design.
This avoids having to set window.myVar = %REACT_APP_MY_VAR% in HTML.
See more useful details about this from Facebook directly:
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
Why don't you try using Context?
You can declare a global context variable in any of the parent components and this variable will be accessible across the component tree by this.context.varname. You only have to specify childContextTypes and getChildContext in the parent component and thereafter you can use/modify this from any component by just specifying contextTypes in the child component.
However, please take a note of this as mentioned in docs:
Just as global variables are best avoided when writing clear code, you should avoid using context in most cases. In particular, think twice before using it to "save typing" and using it instead of passing explicit props.
Create a file named "config.js" in ./src folder with this content:
module.exports = global.config = {
i18n: {
welcome: {
en: "Welcome",
fa: "خوش آمدید"
}
// rest of your translation object
}
// other global config variables you wish
};
In your main file "index.js" put this line:
import './config';
Everywhere you need your object use this:
global.config.i18n.welcome.en
Is not recommended but.... you can use componentWillMount from your app class to add your global variables trough it... a bit like so:
componentWillMount: function () {
window.MyVars = {
ajax: require('../helpers/ajax.jsx'),
utils: require('../helpers/utils.jsx')
};
}
still consider this a hack... but it will get your job done
btw componentWillMount executes once before rendering, see more here:
https://reactjs.org/docs/react-component.html#mounting-componentwillmount
Here is a modern approach, using globalThis, we took for our React Native app.
globalThis is now included in...
Modern browsers - MDN documentation
Typescript 3.4 - Handbook documentation
ESLint v7 - Release notes
appGlobals.ts
// define our parent property accessible via globalThis. Also apply the TypeScript type.
var app: globalAppVariables;
// define the child properties and their types.
type globalAppVariables = {
messageLimit: number;
// more can go here.
};
// set the values.
globalThis.app = {
messageLimit: 10,
// more can go here.
};
// Freeze so these can only be defined in this file.
Object.freeze(globalThis.app);
App.tsx (our main entry point file)
import './appGlobals'
// other code
anyWhereElseInTheApp.tsx
const chatGroupQuery = useQuery(GET_CHAT_GROUP_WITH_MESSAGES_BY_ID, {
variables: {
chatGroupId,
currentUserId: me.id,
messageLimit: globalThis.app.messageLimit, // 👈 used here.
},
});
Can keep global variables in webpack i.e. in webpack.config.js
externals: {
'config': JSON.stringify({ GLOBAL_VARIABLE: "global var value" })
}
In js module can read like
var config = require('config')
var GLOBAL_VARIABLE = config.GLOBAL_VARIABLE
Hope this will help.
The best way I have found so far is to use React Context but to isolate it inside a high order provider component.
Maybe it's using a sledge-hammer to crack a nut, but using environment variables (with Dotenv https://www.npmjs.com/package/dotenv) you can also provide values throughout your React app. And that without any overhead code where they are used.
I came here because I found that some of the variables defined in my env files where static throughout the different envs, so I searched for a way to move them out of the env files. But honestly I don't like any of the alternatives I found here. I don't want to set up and use a context everytime I need those values.
I am not experienced when it comes to environments, so please, if there is a downside to this approach, let me know.
Create a file :
import React from "react";
const AppContext = {};
export default AppContext;
then in App.js, update the value
import AppContext from './AppContext';
AppContext.username = uname.value;
Now if you want the username to be used in another screen:
import AppContext from './AppContext';
AppContext.username to be used for accessing it.
For only declaring something, try this. Make sure MyObj is assigned at the proper time for you want to access it in render(), many ways was published before this thread. Maybe one of the simplest ways if undefined then create it does the job.
declare global {
interface Window {
MyObj: any;
}
}
USE CUSTOM HOOKS
It is very simple if you use custom hooks
Refer this link
https://stackoverflow.com/a/73678597/19969598
Full sample usage is available in the above post
This answer is for global part of question not I18N.
I wanted a global variable and function across all components of my application and without child-parent relationship.
This Answer is like a good one; but it was not completely clear to me so i had to test it my way.
I used below approach; not sure if this is a "good or bad practice" or even "off-topic"; but share in case help someone.
Global.jsx
const Global = () => { }
export default Global;
Global.var = 100;
Global.func = () => {
Global.var += 1;
alert(Global.var);
}
MyComponent1.jsx
import Global from "./Global";
import React from "react";
const MyComponent1 = () => {
return ( <h1 onClick={Global.func}>COM1: {Global.var}</h1>)
}
export default MyComponent1;
MyComponent2.jsx
import Global from "./Global";
import React from "react";
const MyComponent2 = () => {
return ( <h1 onClick={Global.func}>COM2: {Global.var}</h1>)
}
export default MyComponent2;
And anywhere like index.js
root.render(
<div>
.
.
.
<MyComponent1/>
<MyComponent1/>
<MyComponent2/>
<MyComponent2/>
.
.
.
</div>
);
Note: This way you have access to a global function or variable; but provided sample cannot update (render) screen itself cause no state or prop has been changed.
We can change the solution like this and keep ref of our components or DOM objects in our Global Zone like this (Not that i do not know its a good practice or even the worst case; so its on your own):
Global.jsx
const Global = () => { }
export default Global;
Global.var = 100;
Global.refs = [];
Global.inc = () => {
Global.var += 1;
Global.refs.forEach(ref => {
ref.current.innerText = Global.var;
});
}
MyComponent1.jsx, MyComponent2.jsx, ...
import Global from "./Global";
import React, { createRef } from "react";
const MyComponent1 = () => {
const ref = createRef();
Global.refs.push(ref);
return (<div onClick={Global.inc}>
<h2>COM1:</h2>
<h3 ref={ref} >{Global.var}</h3>
</div>);
};
export default MyComponent1;
I don't know what they're trying to say with this "React Context" stuff - they're talking Greek, to me, but here's how I did it:
Carrying values between functions, on the same page
In your constructor, bind your setter:
this.setSomeVariable = this.setSomeVariable.bind(this);
Then declare a function just below your constructor:
setSomeVariable(propertyTextToAdd) {
this.setState({
myProperty: propertyTextToAdd
});
}
When you want to set it, call this.setSomeVariable("some value");
(You might even be able to get away with this.state.myProperty = "some value";)
When you want to get it, call var myProp = this.state.myProperty;
Using alert(myProp); should give you some value .
Extra scaffolding method to carry values across pages/components
You can assign a model to this (technically this.stores), so you can then reference it with this.state:
import Reflux from 'reflux'
import Actions from '~/actions/actions'
class YourForm extends Reflux.Store
{
constructor()
{
super();
this.state = {
someGlobalVariable: '',
};
this.listenables = Actions;
this.baseState = {
someGlobalVariable: '',
};
}
onUpdateFields(name, value) {
this.setState({
[name]: value,
});
}
onResetFields() {
this.setState({
someGlobalVariable: '',
});
}
}
const reqformdata = new YourForm
export default reqformdata
Save this to a folder called stores as yourForm.jsx.
Then you can do this in another page:
import React from 'react'
import Reflux from 'reflux'
import {Form} from 'reactstrap'
import YourForm from '~/stores/yourForm.jsx'
Reflux.defineReact(React)
class SomePage extends Reflux.Component {
constructor(props) {
super(props);
this.state = {
someLocalVariable: '',
}
this.stores = [
YourForm,
]
}
render() {
const myVar = this.state.someGlobalVariable;
return (
<Form>
<div>{myVar}</div>
</Form>
)
}
}
export default SomePage
If you had set this.state.someGlobalVariable in another component using a function like:
setSomeVariable(propertyTextToAdd) {
this.setState({
myGlobalVariable: propertyTextToAdd
});
}
that you bind in the constructor with:
this.setSomeVariable = this.setSomeVariable.bind(this);
the value in propertyTextToAdd would be displayed in SomePage using the code shown above.

ReactJS - After component mounts need to import/rerun local javascript file

Need to import "validation.js" file within another javascript file in reactjs once the main file render method is completes it execution
import './Validations';
should render this JS file once the main component's render method complete its execution
What you're trying to achieve is not really the way react likes to behave and probably is a mistake. if you need some extra functionality to be available in your component you could define a class, put your external logic in there and then instantiate an object from that class in your component's constructor or render method, and use whatever functionality you need in from there.
You can use react-loadable library to lazy load javascript file.
import Loadable from 'react-loadable';
const LoadableTest = Loadable({
loader: () => import('./validations.js'),
loading() { // you could write your spinner while the file is being loaded.
return <div>Loading...</div>
}
});
class MyComponent extends React.Component {
render() {
return <LoadableTest/>;
}
}

Using module.exports to expose React class instance

I know the title is maybe a bit confusing. Here's a code sample:
//First.js
export default class First extends React.Component {
constructor(props) {
super(props);
module.exports.push = route => {
this.refs.router.push(route)
}
module.exports.pop = () => {
this.refs.router.pop()
}
}
render() {
return <Router ref="router"/>
}
}
and then
//second.js
import { push, pop } from "first.js"
//class instantiation and other code
push("myRoute")
Code pen: https://codepen.io/Stefvw93/pen/bLyyNG?editors=0010
The intent is to avoid using the withRouter function from react-router. So instead, expose push/pop history functions from a single instance of react-router's browserRouter component. It works by creating a reference to the router instance (ref="router") and then exporting this instance by doing something like module.exports.push=this.refs.router.push
Since you can not declare any dynamic exports, the only way would to export push and pop would be to export some sort of mutable container object first, and then modify it afterwards. e.g Export immediately an empty object, and set its push and pop properties in the constructor.
//First.js
export const router = {};
export default class First extends React.Component {
constructor(props) {
super(props);
router.push = route => {
this.refs.router.push(route)
};
router.pop = () => {
this.refs.router.pop()
};
}
render() {
return <Router ref="router"/>
}
}
and then
//second.js
import { router } from "first.js"
//class instantiation and other code
router.push("myRoute")
But there are big downsides of doing it this way:
you’ll end up using last rendered router instance
there’s no checking if such instance already exists
you can not have multiple routers using the same pattern
I’d prefer being explicit and writing withRouter wherever I need router, because:
it is not subject to race conditions — you either have a router or you don’t, in which case you get a nice error log
it communicates your intention clearly, and documentation about withRouter exists
uses well—known and elegant HoC pattern
allows you to have multiple routers
Long story short, mutable global state is bad, just don’t do it.

How to use React.js to render server-side template on Sails.js?

I am trying to build an isomorphing app with Sails.js and React. Client-side part is easy. But I run into problems with server-side rendering.
When I try to server-render an *.jsx file with React, I got this:
renderToString(): You must pass a valid ReactElement
I am using sailsjs, react and sails-hook-babel (for ES6 syntax).
./assets/components/Auth.jsx:
import React from 'react';
export class Auth extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='auth'>
Very simple element without any logic just for test server-rendering.
</div>
);
}
}
./api/controllers/AuthController.js:
var Auth = require('./../../assets/components/Auth.jsx');
import React from 'react';
module.exports = {
render: function (req, res) {
//var markup = React.renderToString(
// Auth
//); // This throws an error
console.log(Auth); // {__esModule: true, Auth: [Function: Auth]}
//res.view("layout", {app: markup});
}
};
I have tried both ES5/ES6 syntax everywhere. Error occurs everytime. At clientside this Auth.jsx works fine (I am using webpack with babel-loader).
Your problem isn't with your component itself, it's how you're exporting it from your module.
When using just export you need to import your module like this.
import {Auth} from 'auth';
Just using export allows for exporting more than 1 thing from your module.
// My Module.
export function a(x) {
console.log('a');
}
export function b(x, y) {
console.log('b');
}
import { a, b } from 'myModule';
or you can use import * from 'myModule';
This is called a named export.
What your use case begs for is the use of export default which allows a single object to be exported from your module.
export default class Auth extends React.Component {}
Thus letting you import your module as a single object without curly braces.
import Auth from 'auth';
Then you need to render using either use JSX syntax React.renderToString(<Auth />); or
React.createElement(Auth);
You can read all on how modules in ECMA Script 6 works here

Categories