'../../utils/typography' does not contain an export named 'rhythm'.

[farebord]

Steps to reproduce:

• create-react-app <dir_name>
• create a component with this code:

import React, { Component } from 'react'
import { rhythm } from '../../utils/typography'

import './index.css'

export default class Navbar extends Component {
    render(){
        return (
            <nav className="navbar">
                <div 
                    className="container"
                    style={{
                        maxWidth: rhythm(40)
                    }}    
                >

                </div>
            </nav>
        )
    }
}

Console returns error: '../../utils/typography' does not contain an export named 'rhythm'.

typography.js contains:

import Typography from 'typography'
import Wordpress2016 from 'typography-theme-wordpress-2016'

Wordpress2016.overrideThemeStyles = () => ({
  'a.gatsby-resp-image-link': {
    boxShadow: 'none',
  },
})

delete Wordpress2016.googleFonts

const typography = new Typography(Wordpress2016)

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles()
}

export default typography

[brdauria]

I had the same problem. The solution for me has been, this

import typography from '../../utils/typography'

var rhythm = typography.rhythm

the problem comes from the use of the spread operator ...vr in the return object of the typography function in the file index.js that does not assign names to the export variables.