Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module not found: Error: Can't resolve '/.cache/webfonts/webfonts.css' in '...\node_modules\gatsby-plugin-webfonts' #37

Open
sven5 opened this issue Mar 17, 2022 · 8 comments

Comments

@sven5
Copy link

sven5 commented Mar 17, 2022

I'm getting this error trying to run gatsby develop

we're using the latest Gatsby packages:

"gatsby": "^4.10.0",
    "gatsby-background-image": "^1.6.0",
    "gatsby-cli": "^4.10.0",
    "gatsby-plugin-google-gtag": "^4.10.0",
    "gatsby-plugin-image": "^2.9.0",
    "gatsby-plugin-manifest": "^4.10.0",
    "gatsby-plugin-offline": "^5.10.0",
    "gatsby-plugin-postcss": "^5.10.0",
    "gatsby-plugin-react-helmet": "^5.10.0",
    "gatsby-plugin-sass": "^5.10.0",
    "gatsby-plugin-sharp": "^4.10.0",
    "gatsby-plugin-sitemap": "^5.10.0",
    "gatsby-plugin-testing": "^0.3.5",
    "gatsby-plugin-typography": "^4.10.0",
    "gatsby-plugin-webfonts": "^2.2.1",
    "gatsby-remark-copy-linked-files": "^5.10.0",
    "gatsby-remark-images": "^6.10.0",
    "gatsby-remark-prismjs": "^6.10.0",
    "gatsby-remark-responsive-iframe": "^5.10.0",
    "gatsby-remark-smartypants": "^5.10.0",
    "gatsby-source-filesystem": "^4.10.0",
    "gatsby-source-sanity": "^7.3.2",
    "gatsby-transformer-remark": "^5.10.0",
    "gatsby-transformer-sharp": "^4.10.0",
    "gatsby-transformer-yaml": "^4.10.0",
@sven5
Copy link
Author

sven5 commented Mar 17, 2022

Ok, I think the cause is we're trying to use custom fonts.

options: {
       custom: {
         families: ['xxxx', 'xxx', 'Source Sans Pro']
       }
     }

@sensedrive
Copy link

sensedrive commented Apr 12, 2022

We are facing the same issue with the following config

{
  {
    options: {
      fonts: {
        google2: [
          {
            family: "Montserrat",
            axes: "wght@400;700",
          },
        ],
      },
    },
    resolve: `gatsby-plugin-webfonts`,
  },
}

Did you find a solution @sven5 ?

@sven5
Copy link
Author

sven5 commented Apr 12, 2022

@sensedrive We're no longer using gatsby-plugin-webfonts
Instead, we switched to gatsby-omni-font-loader

@arafatamim
Copy link

arafatamim commented May 16, 2022

My development also fails with the following error:

...
success copy gatsby files - 0.128s
success Compiling Gatsby Functions - 0.131s

 ERROR #11321  PLUGIN

"gatsby-plugin-webfonts" threw an error while running the onPreBootstrap lifecycle:

connect ETIMEDOUT 216.239.32.10:443



  Error: connect ETIMEDOUT 216.239.32.10:443

  - node:net:1187 TCPConnectWrap.afterConnect [as oncomplete]
    node:net:1187:16


success onPreBootstrap - 133.385s
success createSchemaCustomization - 0.636s

...

ERROR

Module not found: Error: Can't resolve '/.cache/webfonts/webfonts.css' in
'/home/shafi/rbds-website/node_modules/.pnpm/gatsby-plugin-webfonts@2.2.2_gatsby@4.14.0/node_modules/gatsby-plugin-webfonts'



  ModuleNotFoundError: Module not found: Error: Can't resolve '/.cache/webfonts/webfonts.css' in '/home/shafi/rbds-website/node_modules/.pnpm/gatsby-pl
  ugin-webfonts@2.2.2_gatsby@4.14.0/node_modules/gatsby-plugin-webfonts'

...

Configured like this:

    {
      resolve: "gatsby-plugin-webfonts",
      options: {
        fonts: {
          google: [
            {
              family: "Fira Sans",
              variants: ["300", "400", "500"],
              subsets: ["latin"],
              fontDisplay: "swap",
              strategy: "selfHosted" // 'base64' || 'cdn'
            },
            {
              family: "Roboto Slab",
              variants: ["500"],
              subsets: ["latin"],
              fontDisplay: "swap",
              strategy: "selfHosted" // 'base64' || 'cdn'
            }
          ]
        },
        formats: ["woff2", "woff"],
        useMinify: true,
        usePreload: true
        //usePreconnect: false,
      }
    }

@chandlervdw
Copy link

I'm having this issue, as well. I cannot pass null when using this plugin with gatsby-theme-material-ui.

@alexmacarthur
Copy link

Same issue here.

@jfgilmore
Copy link
Contributor

jfgilmore commented Jul 6, 2023

Ok, I think the cause is we're trying to use custom fonts.

Yeah, I know this is a bit late but that's not the correct syntax for this plugin you should use seflHosted as per the documentation.

@MatkoMilic
Copy link

Ok, I think the cause is we're trying to use custom fonts.

Yeah, I know this is a bit late but that's not the correct syntax for this plugin you should use seflHosted as per the documentation.

Didnt fix it for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants