react-json-view
react-json-view copied to clipboard
mac-s-g
ReferenceError: window is not defined
From the latest version, server-side rendering produces following issue
ReferenceError: window is not defined
at C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:150552
at C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:150507
at e.exports (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:151009)
at Object.
help me please !!!
@hnhatr i'm having trouble reproducing the error. The error output you posted comes from the uglified and minified build, so it's tough to see where window is being referenced.
I know the issue is coming from a dependency, because window is not referenced in my src/ directory. I could try to track down what dependency is causing the issue.
can you tell me more about what tools & config you're using for server-side rendering?
is there a github link that will give me some more info about your build?
also, @hnhatr , it looks like you're not the only one running into "window is not defined" issues when using server-side rendering.
a google search shows quite a bit of people running into the same issue.
there should be tools to emulate the window global on the server. here is an example of someone solving the problem by faking a window variable. I also believe there are plugins for ssr that initialize a global window object.
I'm having the same issue, none of the hacks seem to work as the plugin is loaded using webpack before the global can be set.
I believe the included lib with is causing the issue is: https://github.com/zenorocha/clipboard.js/blob/a55c9ac513da6e6d01dfd6ceed9a930c596cf7e4/src/clipboard-action.js#L141
This is due to style loader. module of webpack. https://github.com/webpack-contrib/style-loader/issues/272#issuecomment-345274784.
I guess we have to use different style loader if you want to support server side rendering. Do you support server side rendering ?
@Alchemist-V are you using server side rendering? if yes can you disable it if not then you should use different style loader. something similar to https://github.com/kriasoft/isomorphic-style-loader
@indolent-developer have you got this working with SSR? If so could you point me to a working fork/pull req?
@Rid I was able to work this via disabling server side rendering of this component. No fork or pull.
@indolent-developer I got it working by trying to load the component lazily. Something like this:
var ReactJson = null; class JsonEditor extends React.Component{ constructor() { super(); } componentDidMount() { require.ensure(['react-json-view'], function() { try { ReactJson = require('react-json-view').default; } catch(err) { console.log('react-json-view:', err); } }) } render () { return ( { ReactJson == null ? "Unable to load content": <ReactJson src={context} onEdit={this.onEdit.bind(this)} /> } ) }
Any concerns or feedback?
@Alchemist-V looks fine to be.
We do need a longterm solution for this though. A PR from some one. What does author have to say ? I am currently tied up :(
@Alchemist-V I can confirm it's working, thanks! I think a fork/pull req using isomorphic-style-loader is better but I don't have time to test right now
I'm totally cool with swapping out the loaders if that fixes the issue. anyone want to post a PR? I'm happy to test, merge, and publish.
Thanks @Rid ! Let me see if i can file a PR for this. Hope the above hack works for all in the mean time.
Last week I had this working perfectly fine, after restarting project I only get a window is not defined error. Any suggestions?
Thanks
P.S. The hack above worked, but not ideal
My workaround has two parts:
- use conditional rendering in your component like the code snippet below
<div>
{ typeof window !== 'undefined' && ReactJsonViewt && <ReactJsonView />}
</div>
- Modify your webpack config to avoid loading the
react-json-viewduring stagebuild-html, something like below:
// workaround for using react-json-view
if (stage === 'build-html') {
// console.log('inside build-html ...');
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-json-view/,
use: loaders.null(),
},
],
},
});
}
For users using nextjs, you can use next/dynamic for this case
const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false });
return your json view with data like
<DynamicReactJson src={yourData}
I solved this with the following code:
render() {
let JsonDom;
const { info } = this.state;
if (!canUseWindow || !info) {
JsonDom = <div />;
} else {
var ReactJson = require('react-json-view');
JsonDom = <ReactJson.default src={info} />;
}
return (
<div>
<Button type="primary" block onClick={this.getDeviceInfo}>
getDeviceInfo
</Button>
<div>{JsonDom}</div>
</div>
);
}
If you have a better way, please call me Thanks
The minified code at the point of the error is reported has the following code:
(function(){return window&&document&&document.all&&!window.atob})
Its failing at that first reference to window, and is very near some other code related to base64 encoding data urls. This error appears shortly after ""The style-loader cannot be used in a non-browser environment".
I've confirmed its this line: https://github.com/mac-s-g/react-json-view/blob/master/webpack/webpack.config.js#L55
I've cloned and linked this repo locally and I can confirm that removing that loader from the webpack config allows the SSR to complete successfully (not sure if the component stops working or not though).
Here is a bug in that library that is related to this issue: https://github.com/webpack-contrib/style-loader/issues/272
Here is another bug which appears to fix this specific issue: https://github.com/webpack-contrib/style-loader/pull/250
There are multiple PR's in that repo that have been closed as won't fix for this issue because the project owner seems to think that this library wont' work in SSR environments anyway and so it shouldn't be fixed.
Here is the current code, which is different than the version we are using: https://github.com/webpack-contrib/style-loader/blob/de38c395cdf59f2babe54bf0e7e2f816baf36c74/src/runtime/injectStylesIntoStyleTag.js#L11
Updating style-loader to the latest version fixes this error but then it throws a new error later on saying document is not defined in a different spot...
I hate to say it but I think the real solution here is to redo react-json-view's styling entirely to not be using sass or webpack to load and pack styles 😬 Or at the very worst, provide the css files separately and require the caller to figure out how they want to load the css files. Don't package the deployed code with built in css loading.
This is the line that probably needs to be removed ultimately: https://github.com/mac-s-g/react-json-view/blob/master/src/js/index.js#L13
And replace it with inline react styling: https://reactjs.org/docs/dom-elements.html#style
Until that happens, I think you have to render your component dynamically with SSR off, in my case like this:
import React from 'react'
import dynamic from 'next/dynamic'
const App = dynamic({
loader: import ('../components/app'),
ssr: false
})
export default Index () {
return (<App />)
}
Here's a little workaround inspired by the previous answers, while SSR is still not supported:
import React from 'react'
export default props => {
if (typeof window !== "undefined") {
const ReactJson = require('react-json-view').default
return <ReactJson {...props} />
}
return null
}
Tested on Gatsby v2. No extra webpack config needed.
