Updated dependencies to the latest stable versions #9
Conversation
|
See issue #5 |
|
It also resolves #8 |
|
As far as I can see it also resolves #1 |
| @@ -1,6 +1,6 @@ | |||
| import * as React from 'react'; | |||
| import Link from 'next/link'; | |||
| import styled from 'styled-components'; | |||
| const styled = require('styled-components').default; | |||
There was a problem hiding this comment.
I'm not sure const styled = require('styled-components').default is a good approach. Why exactly import styled from 'styled-components' doesn't work?
There was a problem hiding this comment.
Looks like it has to do with this issue
styled-components/babel-plugin-styled-components#41 (comment)
When we use import styled from 'styled-components', it gets transformed to styled_components_1.default by typescript compiler which is not recognized as a styled component helper by babel-plugin-styled-components.
I believe, this issue was present before, but wasn't obvious, because react 15 just replaced the mismatched server-generated markup.
Since react 16 doesn't do this anymore, it becomes evident in development mode. When a page gets loaded, the styles don't apply to the components because of className mismatch.
app/components/Layout/index.tsx
Outdated
| @@ -1,7 +1,7 @@ | |||
| import * as React from 'react'; | |||
| import { Header } from '../Header'; | |||
| import { Footer } from '../Footer'; | |||
| import styled from 'styled-components'; | |||
| const styled = require('styled-components').default; | |||
|
|
|||
| const Layout: React.StatelessComponent<any> = ({ children }): JSX.Element => ( | |||
There was a problem hiding this comment.
Can we have it properly typed avoiding <any> ?
No description provided.