Module parse failed - potential Webpack config conflict

[samf01]

Hi,

I just tried replacing gatsby-plugin-web-font-loader with your loader, as your blog neatly summated the problems with the former! My latest project is running on Gatsby v3 and I get a non-fatal error in develop-mode:

ERROR Failed to compile with 6 errors 17:39:23 ⠀ 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) ⠀

The error on build is fatal and seems to include a conflict with netlify-cms:

ERROR #11321 PLUGIN

"gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:

Module parse failed: Unexpected token (4:23) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders	import { Helmet } from "react-helmet"

export const AsyncFonts: React.FC<{ hrefs: string[] }> = ({ hrefs }) => {	const links = []

ModuleParseError: Module parse failed: Unexpected token (4:23) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See h ttps://webpack.js.org/concepts#loaders	import { Helmet } from "react-helmet"

export const AsyncFonts: React.FC<{ hrefs: string[] }> = ({ hrefs }) => {	const links = []

My package.json dependencies are:

"dependencies": { "@ccalamos/gatsby-source-googlemaps-static": "^3.1.1", "babel-plugin-styled-components": "^1.12.0", "gatsby": "^3.4.1", "gatsby-background-image": "^1.5.3", "gatsby-plugin-env-variables": "^2.1.0", "gatsby-plugin-gatsby-cloud": "^2.4.1", "gatsby-plugin-image": "^1.4.0", "gatsby-plugin-manifest": "^3.4.0", "gatsby-plugin-modal-routing-3": "^3.0.0", "gatsby-plugin-netlify-cms": "^5.4.1", "gatsby-plugin-offline": "^4.4.0", "gatsby-plugin-react-helmet": "^4.4.0", "gatsby-plugin-react-svg": "^3.0.1", "gatsby-plugin-sharp": "^3.5.0", "gatsby-plugin-smoothscroll": "^1.2.0", "gatsby-plugin-styled-components": "^4.4.0", "gatsby-plugin-web-font-loader": "^1.0.4", "gatsby-remark-copy-linked-files": "^4.2.1", "gatsby-remark-images": "^5.2.1", "gatsby-remark-relative-images": "^2.0.2", "gatsby-source-filesystem": "^3.4.0", "gatsby-transformer-remark": "^4.1.0", "gatsby-transformer-sharp": "^3.4.0", "gbimage-bridge": "^0.1.4", "google-map-react": "^2.1.9", "intersection-observer": "^0.12.0", "netlify-cms-app": "^2.15.2", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", "react-google-recaptcha": "^2.1.0", "react-helmet": "^6.1.0", "react-masonry-component": "^6.2.1", "react-slick": "^0.28.1", "react-slick-ios-fix": "^0.24.8", "react-transition-group": "^4.4.1", "remark": "^13.0.0", "remark-html": "^13.0.1", "request-animation-frame-polyfill": "^1.1.2", "slick-carousel": "^1.8.1", "styled-components": "^5.3.0", "use-fit-text": "^2.4.0" }

I'm node -v 16 ( I should really be on 14) don't know if this could cause the problem? Would be grateful for your insight?

Thanks

[codeAdrian]

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"]
}

[samf01]

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) ⠀

[codeAdrian]

Tried to reproduce the issue on a pure Gatsby V3 installation and both dev and build pass with only the plugin installed.

Dev build:

Production 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

[samf01]

Will do. Plugin appears in dependencies correctly. I will have to start unloading dependencies and see what seems to work. Thanks for your help!

[codeAdrian]

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

[samf01]

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!)?

[codeAdrian]

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

[samf01]

Oh well - its their IP!? Thanks for clearing that one up.

[codeAdrian]

You're welcome. Since the issue is solved, I'll close this one. Thanks!

[samf01]

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.