Next.js: style is being applied for twice
The style was originally rendered on server side, but client side will executes again which causing the style inserted into <head> for twice. I think the framework itself should check if there's already style in <head> then remove the old one before inserting the new one.
nodegin
All 12 comments
This bug is affecting the debugging of CSS using inspector, we have to disable the rules for twice which is anonying
nodegin
on 28 Oct 2016
@nodegin Can you post the snippet ? I can't reproduce the issue.
nkzawa
on 28 Oct 2016
@nkzawa
pages/index.js:
export default class extends React.Component {
static async getInitialProps ({ req }) {
const isServer = !!req
const data = await (await fetch('http://127.0.0.1:8082/api/data')).json()
const store = initStore({}, isServer)
store.dispatch(actions.loadData(data))
return { isServer, initialState: store.getState() }
}
constructor (props) {
super(props)
this.store = initStore(props.initialState, props.isServer)
}
render () {
return (
<Provider store={this.store}>
<MainLayout>
<NavigationBar />
</MainLayout>
</Provider>
)
}
}
components/NavigationBar:
import $ from '../styles'
import React from 'react'
export default () => (
<div className={ $.navbar }>
123
</div>
)
styles/index.js:
import * as Base from './Base'
import * as Navbar from './Navbar'
export default {
...Base,
...Navbar,
}
styles/Navbar.js:
import css, { merge } from 'next/css'
import { verticalAlign } from './Base'
const navbar = merge(verticalAlign, css({
height: 32,
width: '100%',
}))
export {
navbar,
}
Same is happening for me.
midudev
on 28 Oct 2016
@nodegin Thanks, but can you make it minimum ?
It seems some parts are missing like initStore and the http://127.0.0.1:8082 server. Can't prepare it on my local.
nkzawa
on 29 Oct 2016
@nkzawa Here you go:
8082 (just a simple express route)
const api = express.Router()
api.get('/list', (req, res) => {
res.send({
test: 'data',
})
})
initStore
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunkMiddleware from 'redux-thunk'
import counter from './reducers/counter'
export const initStore = initialState => {
const reducers = combineReducers({ counter })
if (typeof window === 'undefined') {
return createStore(reducers, initialState, applyMiddleware(thunkMiddleware))
} else {
if (!window.store) {
window.store = createStore(reducers, initialState, applyMiddleware(thunkMiddleware))
}
return window.store
}
}
@nodegin Thanks, but it includes a new file which I don't know if it's related to the issue ... and I don't know Base too.
Can you post only minimum snippets which required to reproduce the issue ? Or if you have the repository url, let me know it.
nkzawa
on 29 Oct 2016
this might be an issue with glamor, I'll have a look this weekend.
threepointone
on 29 Oct 2016
can't reproduce on my end. can you share what the Base file contains? would be nice if you can isolate to something smaller as well.
threepointone
on 31 Oct 2016
@threepointone Here's Base.js FYI:
import css, { merge } from 'next/css'
const alignMiddle = css({
alignItems: 'center',
display: 'flex',
})
export {
alignMiddle,
}
Does this still happen ?
nkzawa
on 2 Dec 2016
+1 v1.2.3
sospedra
on 28 Jan 2017
Related issues
pie6k
路
3Comments
kenji4569
路
3Comments
YarivGilad
路
3Comments
lixiaoyan
路
3Comments
knipferrc
路
3Comments
Most helpful comment
this might be an issue with glamor, I'll have a look this weekend.