search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

gatsby-plugin-subfont build errors (can't find SW files) #9357

Closed ooloth closed 4 years ago

ooloth commented 6 years ago

Description

I've tried to use gatsby-plugin-subfont on several Gatsby v2 sites, but it always errors out for one of the following reasons:

  1. It can't find sw.js (which it says is included by public/app-1b277d8308c390a95f4b.js even if I haven't yet enabled gatsby-plugin-manfest and gatsby-plugin-offline during development)
  2. It can't find public/workbox-v3.6.2/packages/workbox-sw/browser.mjs (which it says is included by public/workbox-v3.6.2/workbox-sw.js.map after I have enabled the service worker)

I'd love to use the plugin! Hoping someone can help.

Steps to reproduce

  1. Install the default Gatsby starter
  2. Add a link to a Google font in Layout.js via react-helmet
  3. Create a lato class in Layout.css with the necessary font-family declaration
  4. Add the lato class to the <h1> in index.js
  5. Install gatsby-plugin-subfont and add it to gatsby-config.js
  6. Run gatsby build

Here is a link to an example repo that followed the steps above and is seeing the gatsby-plugin-subfont errors during the build: https://github.com/ooloth/gatsby-subfont-test

Expected result

No errors!

Actual result

Errors (described above).

Environment

System: OS: macOS 10.14 CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz Shell: 5.3 - /bin/zsh Binaries: Node: 10.12.0 - /usr/local/bin/node Yarn: 1.10.1 - ~/.yarn/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 69.0.3497.100 Firefox: 61.0.2 Safari: 12.0 npmPackages: gatsby: ^2.0.19 => 2.0.19 gatsby-image: ^2.0.15 => 2.0.15 gatsby-plugin-manifest: ^2.0.5 => 2.0.5 gatsby-plugin-offline: ^2.0.5 => 2.0.5 gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 gatsby-plugin-sharp: ^2.0.7 => 2.0.7 gatsby-plugin-subfont: ^1.0.1 => 1.0.1 gatsby-source-filesystem: ^2.0.4 => 2.0.4 gatsby-transformer-sharp: ^2.1.4 => 2.1.4 npmGlobalPackages: gatsby-cli: 2.4.3

cbetta commented 5 years ago

I am seeing the same thing. Did this ever get resolved?

ooloth commented 5 years ago

Not yet!

For the time being, I've been self-hosting webfonts using google-webfonts-helper.

gatsbot[bot] commented 5 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

ooloth commented 5 years ago

Not stale! On Mar 8, 2019, 12:28 PM -0500, gatsbot[bot] notifications@github.com, wrote:

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open! Thanks for being a part of the Gatsby community! 💪💜 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

DSchau commented 5 years ago

@ooloth we use it on www (aka gatsbyjs.org) and don't seem to have any issues!

I'll take a look at your reproduction and see what seems to be different!

ooloth commented 5 years ago

Awesome, thanks! On Mar 8, 2019, 12:36 PM -0500, Dustin Schau notifications@github.com, wrote:

@ooloth we use it on www (aka gatsbyjs.org) and don't seem to have any issues! I'll take a look at your reproduction and see what seems to be different! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

DSchau commented 5 years ago

@ooloth do you get errors, or warnings?

I get warnings, that can safely be ignored:

Generated public/sw.js, which will precache 14 files, totaling 242285 bytes.
 ⚠ WARN: ENOENT: no such file or directory, open 'public/workbox-v3.6.3/packages/workbox-sw/browser.mjs'
         Including assets:
             public/workbox-v3.6.3/workbox-sw.js.map
ooloth commented 5 years ago

@DSchau Thanks for looking into this! When I run gatsby-build on the example repo, I get the same warning, but then I also get an error that breaks the build (locally or on Netlify):

Generated public/sw.js, which will precache 14 files, totaling 235550 bytes.
 ⚠ WARN: ENOENT: no such file or directory, open 'public/workbox-v3.5.0/packages/workbox-sw/browser.mjs'
         Including assets:
             public/workbox-v3.5.0/workbox-sw.js.map

/bin/sh: pyftsubset: command not found
error Plugin gatsby-plugin-subfont returned an error

  Error: Command failed: node_modules/.bin/subfont -i --no-recursive --i  nline-css --root file:///Users/michael/Sites/open-source/issues/gatsby  -subfont-test/public /Users/michael/Sites/open-source/issues/gatsby-su  bfont-test/public/index.html
   ⚠ WARN: ENOENT: no such file or directory, open 'public/workbox-v3.5.  0/packages/workbox-sw/browser.mjs'
           Including assets:
               public/workbox-v3.5.0/workbox-sw.js.map
  /bin/sh: pyftsubset: command not found

I see this error even after running the optional command to enable local font subsetting (pip install --user fonttools brotli zopfli). I'm not sure if that would affect the Netlify builds, anyway.

I hope this is just a simple user error on my part! I keep trying the plugin on all my new sites, but I can't get the sites to build on Netlify until I remove it. Are you installing anything besides gatsby-plugin-subfont to get subfont working?

flowen commented 5 years ago

I'm receiving similar warnings but a different error on my netlify build as well after installing subfont:


5:50:15 PM: success Building static HTML for pages — 4.036 s — 487/487 203.51 pages/second
5:50:22 PM:  ⚠ WARN: ENOENT: no such file or directory, open 'public/sw.js'
5:50:22 PM:          Including assets:
5:50:22 PM:              public/app-039b154fedc9d90b9e8a.js
5:50:22 PM: /bin/sh: 1: pyftsubset: not found
5:50:22 PM:  ⚠ WARN: Missing glyph fallback detected.
5:50:22 PM:          When your primary webfont doesn't contain the glyphs you use, your browser will load your fallback fonts, which will be a potential waste of bandwidth.
5:50:22 PM:          These glyphs are used on your site, but they don't exist in the font you applied to them:
5:50:24 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
5:50:22 PM:          - \u{2192} (→) in font-family 'Cairo' (400/normal) at public/index.html:1:30256```

Local build does not generate any warnings or errors.
dallanlee commented 5 years ago

then I also get an error that breaks the build (locally or on Netlify):

I get the same error and warnings as @ooloth locally and with Netlify deploy. I've tried changing the Google Font <link> to request only 'Open+Sans' without any additional weights and it got rid of the error and one warning. It still didn't work with the one remaining error but it's definitely behaving differently. When trying to use fonts Montserrat or Playfair Display, the error and warning come back.

I'm hoping someone can shed some light!

mvhoute commented 5 years ago

I'm having the same issue. 

1:00:44 PM:          Including assets:
1:00:44 PM:              public/app-c6290a597d97f00da7a9.js
1:00:44 PM: /bin/sh: 1: pyftsubset: not found
1:00:44 PM: TypeError: Expected a finite number, got number: NaN
1:00:44 PM:     at module.exports (/opt/build/repo/gatsby-site/node_modules/subfont/node_modules/pretty-bytes/index.js:46:9)
1:00:44 PM:     at module.exports (/opt/build/repo/gatsby-site/node_modules/subfont/lib/main.js:356:36)
1:00:44 PM: error Plugin gatsby-plugin-subfont returned an error
1:00:44 PM: 
1:00:44 PM:   Error: Command failed: 'node_modules/.bin/subfont' -i --no-recursive --inline-  css --root 'file:///opt/build/repo/gatsby-site/public' '/opt/build/repo/gatsby  -site/public/index.html'
1:00:44 PM:    ⚠ WARN: ENOENT: no such file or directory, open 'public/sw.js'
1:00:44 PM:            Including assets:
1:00:44 PM:                public/app-c6290a597d97f00da7a9.js
1:00:44 PM:   /bin/sh: 1: pyftsubset: not found
1:00:44 PM:   TypeError: Expected a finite number, got number: NaN

After seeing @Munter talk about subfont on Fronteers'19 I was eager to try it out, however it seems to fail on local build and Netlify build too.

Munter commented 5 years ago

I wasn't aware of this issue. I see several problems in the different logs that are pasted in this issue.

pyftsubset: not found error

@mvhoute @ooloth @flowen This error occurs because you are trying to run subfont with font files that are local. This means there is a dependency on pyftsubset which comes from the python package fonttools. Install these with pip install fonttools brotli zopfli in your build environment, or add a requirements.txt for netlify hosted builds, like in this PR example: https://github.com/Munter/fronteers-2019-font-demo/pull/1/files

ENOENT: no such file or directory error

These are literally missing files in your build output. You have some sources pointing at non-existing files. Bad practice. Not a deal breaker for subfont. I think Subfont may be populating to large a part of the dependency graph, since these serviceworker files probably can never lead to a CSS font include. So there might be an optimization I can make which avoid going down irrelevant parts of the dependency graph. I would recommend you fix your broken includes as well though

If the above doesn't resolve your issues, please open issues at https://github.com/Munter/subfont/issues with ways to reproduce

gatsbot[bot] commented 4 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

gatsbot[bot] commented 4 years ago

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!