Comments (5)
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.
from breko-hub.
Good idea - I'll try that next. Thanks, @tomatau
from breko-hub.
No problem @marclar ! Let me know if it works please :)
from breko-hub.
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
from breko-hub.
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";
from breko-hub.
Related Issues (20)
- Version 10 of node.js has been released HOT 1
- Windows path bug in css-modules HOT 11
- Semantic UI icon fonts displayed as squares HOT 2
- Mocha doesn't terminate HOT 3
- Serverside redux+socket example HOT 2
- An in-range update of react is breaking the build 🚨 HOT 2
- An in-range update of babel7 is breaking the build 🚨 HOT 2
- Preloading data from backend before SSR HOT 4
- How to edit the expected server-side state? HOT 6
- Update react-helmet HOT 1
- An in-range update of eslint is breaking the build 🚨 HOT 5
- Implement review apps HOT 1
- An in-range update of chokidar is breaking the build 🚨
- An in-range update of eslint-plugin-react is breaking the build 🚨
- An in-range update of webpack is breaking the build 🚨
- An in-range update of sinon is breaking the build 🚨
- An in-range update of enzyme-to-json is breaking the build 🚨
- An in-range update of eslint-plugin-react is breaking the build 🚨
- An in-range update of url-loader is breaking the build 🚨
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from breko-hub.