[build error] skipping server-sided rendering for a react component using react-router (Spectacle) #401
Comments
|
Is there some way you could add Spectacle in "componentDidMount"?
|
|
Also a more convoluted way is to render the presentation in its own react
|
|
Unfortunately, it does not work. I am making a lecture note (presentation) site which includes many presentations. |
|
Try You can read more about it here https://webpack.github.io/docs/code-splitting.html Gatsby will be using it soonish to split code on larger sites #10 Try something like: let Spectacle
export default class ReactComponent extends React.Component {
componentDidMount () {
require.ensure([], function(require) {
{ Spectacle } = require("spectacle");
});
}
render () {
if (Spectacle) {
return (
<Spectacle />
)
} else {
return (
<div />
)
}
}
} |
|
It works very well with a minor modification. import React from 'react'
import DocumentTitle from 'react-document-title'
import { config } from 'config'
let MySlide ;
export default class ReactComponent extends React.Component {
constructor () {
super()
this.state = { mount : false } //To rerender
}
componentDidMount () {
//require.ensure([], function(require) {
MySlide = require("../client/myslide.js");
//});
this.setState( { mount : true }); //To rerender.
}
render () {
if (MySlide !== undefined ) {
return (
<MySlide/>
)
} else {
return (
null
)
}
}
}require.ensure did not work with develop and build command I also added a dummy state to re-render. If I find a better way, I will post it later. |
|
Great! Please do post if you make any more improvements. Closing this issue for now... |
|
Use the react-async-component and defer the loading for the client only |
|
Is there a better solution since the release of Gatsby v1? I think there should be a way to exclude specific pages from the server-side rendering process. Modifying the |
|
I'm getting this error on build with react-router. I tried: import { GatsbyNode } from 'gatsby';
export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] =
({ stage, loaders, actions }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-router/,
use: loaders.null()
}
]
}
});
}
};but now I'm getting: |
I am adding a spectacle presentation as a js file.
It works very well with develop mode.
But I got an error when I built it.
I think spectacle does not allow server-side rendering since it uses hashHistory.
Is there anyway to skip server-side rendering to avoid above problem?
The text was updated successfully, but these errors were encountered: