-
-
Notifications
You must be signed in to change notification settings - Fork 874
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
window is not defined #1193
Comments
You are rendering a rich text editor server side. This is a @elastic/eui or react-ace issue. |
@fivethreeo got it. And Razzle supports SSR as default so it also means Razzle will not work if my app is using a rich text editor library? |
You could render something else server side. |
@fivethreeo, Do you have any suggestion how to do that? Since, everything will be rendered under As far as I know, whatever libraries/components which I used in the client side will be rendered in the server code.
|
const ssrEuiFieldPassword =
typeof window !== 'undefined' ? EuiFieldPassword : OtherComponent; |
@fivethreeo, It seems doesn't work, I added like this:
I could start the app successfully but I ran into the issue when accessing http://localhost:3000
|
I would do it outside the component so you don’t redefine it on each render/mount. Try const ssrEuiFieldPassword =
process.env.BUILD_TARGET === 'client' ? EuiFieldPassword : OtherComponent; |
Oh, misread that traceback. You need to do a conditional import/require. |
const ssrEuiFieldPassword =
process.env.BUILD_TARGET === 'client' ? require('@elastic/eui').EuiFieldPassword : OtherComponent; |
Thanks @fivethreeo, it's working! |
@samjetski ok if you did this you will get some hydration errors in browser console, according to ReadDOM docs:
so my suggestion here is to create a component called NoSSR like this: class NoSSR extends React.Component {
state = {
isClient: false
}
componentDidMount() {
this.setState({ isClient: true })
}
render() {
const { isClient } = this.state
const { children } = this.props
return isClient ? children : null;
}
} and use it in this way: <NoSSR>
<EuiFieldPassword
placeholder="Placeholder text"
value={'helllow there'}
onChange={() => {}}
aria-label="Use aria labels when no actual label is in use"
/>
</NoSSR> GG EZ Please Close this issue after you read this message. |
Closed due to inactivity. Holler if this is a mistake, and we'll re-open it. |
@nimaa77 I like your really nice solution for disabling SSR. |
The solution is to disable SSR for your react-ace component. None of the examples given worked for me. The below snippet is working in NextJS v10.0.3. Note that the use of
...and then use it where you like just as you would have done with AceEditor:
I realise this repo isn't directly related to react-ace but this issue is currently a top result on Google for this error message. Hopefully this helps someone else out. |
Hi there,
I've run into the issue "window is not defined" when trying to run the 'server.js' file. The error is as bellow:
When I'm trying to use "@elastic/eui" packge in my app.
Steps to reproduce:
Expected: will start successfully without issue
Actual: getting 'window is not defined'
I know the 'window' or 'document' object will not used or available in Node. So, is there any way that we can fix this issue?
Thanks
The text was updated successfully, but these errors were encountered: