gatsby-plugin-typography next not live reloading changes to config file.

[mattmillerart]

Description

Using "gatsby-plugin-typography": "next" with a config file in utils/typography.js, after saving changes these changes are not reflected in browser. The user must stop the gatsby develop process and restart to see the changes reflected.

Interestingly, using gatsby next but using the older "gatsby-plugin-typography": "^1.7.19", plugin in package.json, things work as expected and no incompatibility issues seem to exist from using a 1.x module with 2.x

Steps to reproduce

• Install "gatsby-plugin-typography": "next"
• add utils/typography.js file, mine has the following:

import Typography from 'typography';
import './../fonts/DDCHardware-Regular.otf';
import './../fonts/DDCHardware-Condensed.otf';
import './../fonts/DDCHardware-Compressed.otf';

const typography = new Typography({
  title: 'Makerfaire',
  scaleRatio: 8,
  headerFontFamily: ['DDCHardware-Regular'],
  bodyFontFamily: ['Open Sans'],
  overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
    h1: {
      textShadow: `2px 2px 0 red`
    },
    'h1 > span': {
      fontSize: rhythm(3)
    }
  })
})

export default typography

• run gatsby develop
• make a change in the above config file and save.

Expected result

Browser should live reload with changes

Actual result

No live reload, no changes. User must stop and restart gatsby develop to see changes.

Environment

  System:
    OS: macOS High Sierra 10.13.4
    CPU: x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - /usr/local/bin/node
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 27.0
    Safari: 11.1
  npmPackages:
    gatsby: next => 2.0.0-beta.110
    gatsby-plugin-manifest: next => 2.0.2-beta.6
    gatsby-plugin-offline: next => 2.0.0-beta.9
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
    gatsby-plugin-sass: next => 2.0.0-beta.10
    gatsby-plugin-typography: ^1.7.19 => 1.7.19
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'DIY Truck Cabin',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-sass',
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      }
    }
  ],
}

package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[azdanov]

Indeed. Here's a reproduction: https://github.com/azdanov/my-hello-world.

[email protected] works fine, but a manual reload is required in [email protected].

[azdanov]

The only difference between plugin v1 and v2 is in .babelrc.

v1
https://github.com/gatsbyjs/gatsby/blob/8df59bfb66b28198d98fb82a952001f0e2b90aa8/packages/gatsby-plugin-typography/.babelrc#L3

https://github.com/gatsbyjs/gatsby/blob/8df59bfb66b28198d98fb82a952001f0e2b90aa8/.babelrc#L1-L12

https://github.com/gatsbyjs/gatsby/blob/8df59bfb66b28198d98fb82a952001f0e2b90aa8/.babelrc.js#L1-L57

v2
https://github.com/gatsbyjs/gatsby/blob/2a7a8710ff579dcf4f3489d4e7b995dfb8de298c/packages/gatsby-plugin-typography/.babelrc#L3

https://github.com/gatsbyjs/gatsby/blob/2a7a8710ff579dcf4f3489d4e7b995dfb8de298c/.babel-preset.js#L1-L57

[cpboyd]

A workaround that I've been using has been to simply import something from the typography file somewhere that gets loaded (e.g. a layout wrapper), which seems to add the file to Gatsby's watch-list for changes.

[Chuloo]

Seems related to #6657.

[stjepangrgic]

Same with me. I was just following tutorial from from https://www.gatsbyjs.org/tutorial/part-two/ and live reloading stopped working.

[DavidSabine]

1.
I'm not likely to be able to debug and solve this problem, but I'll happily test stuff if others are working on a fix.

2.
In case anyone else reading this wants to avoid version 2 (until this bug is fixed)…

In one of my repos, I have rolled-back the typography version to 1.7.19 and confirmed that hot-reloading works as expected with UP-TO-DATE versions of these other dependencies:

  "dependencies": {
    "emotion": "^9.2.12",
    "emotion-server": "^9.2.12",
    "gatsby": "^2.0.38",
    "gatsby-plugin-emotion": "^2.0.6",
    "gatsby-plugin-google-analytics": "^2.0.7",
    "gatsby-plugin-google-tagmanager": "^2.0.6",
    "gatsby-plugin-manifest": "^2.0.7",
    "gatsby-plugin-offline": "^2.0.11",
    "gatsby-plugin-react-helmet": "^3.0.1",
    "gatsby-plugin-robots-txt": "^1.3.0",
    "gatsby-plugin-sitemap": "^2.0.2",
    "gatsby-plugin-typography": "1.7.19",
    "gray-percentage": "^2.0.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-emotion": "^9.2.12",
    "react-helmet": "^5.2.0",
    "react-typography": "^0.16.13",
    "typography": "^0.16.17"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-0",
    "babel-jest": "^23.6.0",
    "babel-plugin-emotion": "^9.2.11",
    "cypress": "^3.1.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^23.6.0",
    "jest-dom": "^2.1.0",
    "jest-emotion": "^9.2.11",
    "react-test-renderer": "^16.6.0",
    "react-testing-library": "^5.2.3",
    "start-server-and-test": "^1.7.7"
  },

In other words, there doesn't appear to be any problem using the older version...for now.

[ahinrichs]

Looking into the differences I found that #5219 removed the plugins gatsby-browser.js with the injectStyles call. In v1 this is still present.

I also see that more and more examples include this code in src/utils/typography.js. So maybe this is the recommended way in v2 (e.g. @LeKoArts mimimal-blog-starter or #9099)