Comments (10)
Thanks. please do let me know what the issue was so I can either address it or have it documented for anyone else looking for an answer
from gatsby-omni-font-loader.
Hi Adrian,
I've actually narrowed the fault down to NetlifyCMS and specifically the use of custom CMS previews via "gatsby-plugin-netlify-cms". If one sets a custom preview in gatsby.config like this:
{ resolve: 'gatsby-plugin-netlify-cms', options: { modulePath:
${__dirname}/src/cms/cms.js, }, },
This for instance works fine:
import React from 'react'
import styled from 'styled-components'
const Tester = styled.h1 `
font-size: 5em;
`
const HomeTemplate = ({size, call_home, contact_title, who_image, who_title, tagline, body }) => {
return (
<>
<Tester>Now does this work??</Tester>
<h2>Using data {contact_title}</h2>
</>
)
}
export default HomeTemplate
But, if I add a component with 'Link' imported the error flares up! This is very odd because 'Link' is used extensively elswhere in Gatsby. I can only presume that as Netlify-CMS is a react-app it has a problem with 'Link'. The only thing I would add to this, is that before loading Omni-Font-Loader the CMS preview simply ignored the button press.
I hope this helps you and anyone else who reaches a similar barrier/error. I will now try and work around this in my app by providing dummy button-components without 'Link'.
Best,
Sam.
from gatsby-omni-font-loader.
Hi, I think that the webpack is trying to parse Typescript and throws error when it encounters it.
Try adding
"typescript": "^4.2.3"
and add tsconfig.json to project root
{
"compilerOptions": {
"baseUrl": "src",
"rootDir": "src",
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"strict": true,
"suppressImplicitAnyIndexErrors": true,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"target": "ES5",
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"typeRoots": ["types", "node_modules/@types",
},
"include": ["src", "types"],
"exclude": ["node_modules", "public", ".cache"]
}
from gatsby-omni-font-loader.
Thanks for your help. I think unfortunately I'm still getting the same error. The development environment loads fine, but I think it won't on build.
ERROR Failed to compile with 6 errors
⠀
error in ./node_modules/gatsby-omni-font-loader/components/AsyncFonts.tsx
⠀
Module parse failed: Unexpected token (7:23)
File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { Helmet } from "react-helmet"
|
export const AsyncFonts: React.FC<{ hrefs: string[] }> = ({ hrefs }) => {
| const links = []
|
⠀
error in ./node_modules/gatsby-omni-font-loader/components/FontListener.tsx
⠀
Module parse failed: The keyword 'interface' is reserved (7:0)
File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { hookOptions, useFontListener } from "../hooks"
|
interface Props {
| options: hookOptions
| }
⠀
error in ./node_modules/gatsby-omni-font-loader/utils/arrayCheck.ts
⠀
Module parse failed: Unexpected token (4:31)
File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|$RefreshSetup$ (module.id);
|
export const arrayCheck = (arr?: unknown) =>
| arr && Array.isArray(arr) && Boolean(arr.length)
|
⠀
error in ./node_modules/gatsby-omni-font-loader/utils/getFontFiles.ts
⠀
Module parse failed: Unexpected token (4:37)
File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|$RefreshSetup$ (module.id);
|
export const getFontFiles = (allFonts: { file: string }[]) =>
| allFonts.map(({ file }) => file)
|
⠀
error in ./node_modules/gatsby-omni-font-loader/utils/getFontNames.ts
⠀
Module parse failed: Unexpected token (4:37)
File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|$RefreshSetup$ (module.id);
|
export const getFontNames = (allFonts: { name: string }[]) => {
| const fontNames = []
| allFonts.forEach(({ name }) =>
⠀
error in ./node_modules/gatsby-omni-font-loader/utils/kebabCase.ts
⠀
Module parse failed: Unexpected token (4:29)
File was processed with these loaders:
- ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
|$RefreshSetup$ (module.id);
|
export const kebabCase = (str: string) =>
| str
| .match(/[A-Z]{2,}(?=[A-Z][a-z0-9]|\b)|[A-Z]?[a-z0-9]|[A-Z]|[0-9]+/g)
⠀
from gatsby-omni-font-loader.
Tried to reproduce the issue on a pure Gatsby V3 installation and both dev and build pass with only the plugin installed.
Dev build:
Dependencies
"dependencies": {
"gatsby": "^3.8.1",
"gatsby-omni-font-loader": "^1.3.1",
"gatsby-plugin-gatsby-cloud": "^2.8.1",
"gatsby-plugin-image": "^1.8.0",
"gatsby-plugin-manifest": "^3.8.0",
"gatsby-plugin-offline": "^4.8.0",
"gatsby-plugin-react-helmet": "^4.8.0",
"gatsby-plugin-sharp": "^3.8.0",
"gatsby-source-filesystem": "^3.8.0",
"gatsby-transformer-sharp": "^3.8.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0"
},
"devDependencies": {
"prettier": "2.2.1"
},
Might be related to other plugin or error. Make sure that the plugin is correctly installed under dependencies
. Let me know if you find more details
from gatsby-omni-font-loader.
Will do. Plugin appears in dependencies correctly. I will have to start unloading dependencies and see what seems to work. Thanks for your help!
from gatsby-omni-font-loader.
Hi @codeAdrian,
I've now rebuilt a fresh starter (as you did) and built upto copying the entire package.json and gatsby.config over from my project.
It works fine?! Could there be something I'm missing with this testing approach? I haven't touched node yet for instance. If I clone my original project a-fresh, same error. So it can't be something wrong with the config?
As an aside, if you look at this image, you can see my TypeKit (now Adobe) fonts are loading fine. I put the project-code in an environment variable, but you can see that it is re-exposed in the "head". Is there anyway to hide this? Otherwise anyone can get my fonts (I know - the hacker community is salivating at the thought!)?
from gatsby-omni-font-loader.
Hi @samf01 . I haven't worked with Typekit myself, but I've been reading the docs and I don't see the recommendation that this ID should be hidden or obfuscated. The href needs the id to load the fonts and this is not something that can be hidden or obfuscated, as far as I know.
https://helpx.adobe.com/fonts/using/embed-codes.ug.html
https://helpx.adobe.com/fonts/user-guide.html/fonts/using/add-fonts-website.ug.html
Also, Adobe doesn't offer or recommend any protection or restriction on how typekit fonts are used
You don’t need to specify a list of domain names for your web projects. Add the embed code to any website–no matter where it is hosted–or an HTML email and the fonts will be available to use.
How many websites can use the same set of fonts?
As many as you need: there is no limit on the number of websites (or HTML emails) that can use fonts from the same web project.
https://helpx.adobe.com/fonts/user-guide.html/fonts/using/domains.ug.html
You don’t need to specify a list of domain names for your web projects. The fonts can be used in any website, wherever it is hosted.
https://helpx.adobe.com/fonts/user-guide.html/fonts/using/develop-locally.ug.html
from gatsby-omni-font-loader.
Oh well - its their IP!? Thanks for clearing that one up.
from gatsby-omni-font-loader.
You're welcome. Since the issue is solved, I'll close this one. Thanks!
from gatsby-omni-font-loader.
Related Issues (19)
- Errors when leaving out settigs HOT 3
- gatsby-browser.js causes issue in mono-repo HOT 2
- Add classes to HTML instead of the BODY HOT 3
- Preloading doesn't work when deploying with netlify HOT 3
- Module not found: Error: Can't resolve './defaults' in '.../node_modules/gatsby-omni-font-loader/consts' HOT 4
- Setting MIME type? HOT 2
- More complex example HOT 1
- Error: Failed to decode downloaded font: <URL> HOT 6
- does it support font subsets (greek, latin-ext, ...)?
- How to handle variants in async mode HOT 2
- Integration with npm-typeface fonts
- Text flickers before switch to icon with Material Icons font HOT 10
- FOUT doesn't support for different font-weight HOT 1
- Feature Request: Remove usage of `react-helmet` HOT 7
- Only load fonts that are used in a page
- Crossorigin value automatically assigned and the value is invalid.
- tag[primaryAttributeKey].toLowerCase is not a function HOT 9
- Error: Unable to find plugin HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-omni-font-loader.