How to disable server-side rendering?

[marclar]

First of all, great boilerplate - thanks for publishing it.

Second, I'm trying to integrate with https://onsen.io and merely referencing one of the components returns window is not defined. I assume these components depend on a window object and won't easily integrate with a server-side rendering process.

Is there a reasonable way to disable the server-side rendering? I'm looking in render-app.js and I found the isBrowser utility but I still get the error even when I return early if isBrowser === false.

[tomatau]

You'll need the server render logic to determine which assets to add to the page.

You can use require('onsen') instead of import x from 'onsen' as well as the isBrowser predicate to conditionally import the library that depends on window. Make sure that that module isn't brought into the server render. You might need to do something hacky when it comes to rendering that component based on a conditional require, maybe do a ternary that has a stub component to render on the server.

Something like this:

const StubComponent = props => null

const OnsenComponent = isBrowser ? require('onsen') : StubComponent

// inside render
<OnsenComponent />

This will mean the server uses StubComponent and never references window and the browser will require the onsen code that references window somewhere.

[marclar]

Good idea - I'll try that next. Thanks, @tomatau

[tomatau]

No problem @marclar ! Let me know if it works please :)

[marclar]

So it seems like it's working; no compilation errors, but I still have a couple of issues / questions.

First, I get a warning like this, as the server-rendered component differs from the client-rendered one. Not sure there's an easy way to overcome that without abusing the suppressHydrationWarning property.

Second, I've been having trouble importing the framework's CSS. I've tried a few different approaches but I'm guessing you'd know how to do this properly.

There are files in the node_modules/onsenui/css/ directory but they use @import syntax, so it seems they need a compilation step.

I added ONSEN_STYLES to config/paths.js in order to reference it in webpack.base.config.js, but I keep getting

ERROR in ./node_modules/onsenui/css/onsenui.min.css 1:37
Module parse failed: Unexpected character '@' (1:37)

What's the correct way to include these styles? Thanks very much

[tomatau]

These sounds like general problems that are with building universal components and configuring webpack.

The first problem with diff between server and client is down to the component itself that has this issue.

Running webpack on files inside your node_modules is just a webpack configuration thing. You can edit the webpack configs around the loaders for styling so that they also include \/onsenui\/ or something like this. Adding it to paths isn't necessary for anything. But it looks like the file you're trying to include isn't scss or less, it's just a normal css file onsenui.min.css. Did you try adding this to your main.scss file:

@import "~onsenui/css/onsenui.min.css";