Error when compiling with fonts

[djmtype]

Using Sage 9.0.10, I get this error when running yarn build with a font in the fonts directory.

Any ideas why this might be happening?

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './fonts/Objectivity-Regular.woff2' in '/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/resources/assets/styles'
    at factoryCallback (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/webpack/lib/Compilation.js:276:40)
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/webpack/lib/NormalModuleFactory.js:235:20
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/webpack/lib/NormalModuleFactory.js:60:20
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/webpack/lib/NormalModuleFactory.js:127:20
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/async/dist/async.js:3888:9
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/async/dist/async.js:1062:13)
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/async/dist/async.js:969:16
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/async/dist/async.js:3885:13
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/webpack/lib/NormalModuleFactory.js:119:22
    at onError (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/tapable/lib/Tapable.js:252:11)
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/tapable/lib/Tapable.js:249:35)
    at /Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
    at loggingCallbackWrapper (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/node_modules/tapable/lib/Tapable.js:252:11)

In /resources/assets/styles/common/_fonts.scss (This file is imported into main.scss)

@font-face {
	font-family: 'Objectivity';
	src: url('../fonts/Objectivity-Regular.woff2') format('woff2');
	font-style: normal;
	font-weight: normal;
	font-display: swap;
}

In config.json:
"publicPath": "/wp-content/themes/sage-gateway"

[djmtype]

I don’t recall having these types of issues with Sage 9.0.9 with other projects BTW.

Is there a way to safely downgrade to 9.0.9 without losing my changes?

[djmtype]

I forgot where I saw it, but an answer on a pull request was to downgrade the modules back to:
"resolve-url-loader": "~2.3.1" and "file-loader": "^1.1.6"

This works now, however, that might trigger some other domino effect.

Should I upgrade or downgrade Sage?

Which composer create-project function should be run for Sage 9.1?

After running, composer create-project roots/sage your-theme-name dev-master, there’s no Sage version listed in package.json. So it’s unclear whether dev version means the v9.x or v10.x branch.

[strarsis]

You may be interested in the Sage 9.x update branch that fixes all these build, dependency and other issues:

Sage "9.1": Please test

Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…

[djmtype]

Thanks @strarsis. I see the reference to the font path is an extra directory up.

It use to be:
src: url('../fonts/Objectivity-Regular.woff2') format('woff2');

Now:
src: url('../../fonts/Objectivity-Regular.woff2') format('woff2');

With a stylelintignore file, still getting:

No files matching the pattern "/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/resources/assets/**/*.(s(c|a)ss|css)" were found. 

Even though, I have clearly stated in my .stylelintignore file (which had worked in Sage 9.0.9 projects):
resources/assets/styles/**/*.scss

You can see the error is does not include the styles directory. Is my pattern or path wrong?

[strarsis]

The error occurs during the build or when running lint?
Is it this error (webpack stylelint plugin)?

[1.2.1] No files matching the pattern were found (LESS files)

Edit:
https://github.com/stylelint/stylelint/blob/ef67472d5365097b3923748095b91f081eeda709/CHANGELOG.md#L277

Add --allow-empty-input to the stylelint npm script in the package.json,
this will let stylelint ignore globs that yield no files.

When files actually should be globbed, then your glob is incorrect.
https://stylelint.io/user-guide/ignore-code/#files-entirely

Your patterns in .stylelintignore are always analyzed relative to process.cwd() .

[djmtype]

Whenever I run yarn start or build, I get the error. My paths in my .stylelintignore have always been the same from Sage project to project, since Sage 9.0.3 - 9.0.9.

Why would it stop matching the same exact path now?

This didn’t start happening until Sage 9.0.10.

The webpack.config.js files and package.json rules are the same wherever stylelint is specified.

The only things that are different are the stylelint-related module versions.

Again, in the error, there is no styles directory being returned after the assets directory, yet that’s how it’s defined on line 33 in package.json:

"lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",

The error:
No files matching the pattern "/Volumes/Evo/Local Sites/gateway/app/public/wp-content/themes/sage-gateway/resources/assets/**/*.(s(c|a)ss|css)" were found.

Do you see the difference?

[strarsis]

@djmtype

"lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",

"lint:styles": "stylelint --allow-empty-input \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",

[djmtype]

Sorry, I totally overlooked your reply before. --allow-empty-input

[perryazevedo]

This is confusing me as well. I don’t see any errors when I run yarn build or yarn start. However, no fonts from the resources/assets/fonts folder get pulled into dist. So, then the browser shows warnings that say: Failed to decode downloaded font and OTS parsing error invalid sfntVersion.

I’m guess this has something to do with how the loader is setup?

[strarsis]

Are you using Sage 9.x update branch or the current release of 9.x?

[strarsis]

So I did a test with Sage 9.x release and Sage 9.x update branch and noticed that albeit there is a fonts/ folder in assets/ (using a .gitkeep placeholder), there is webpack config in place to copy it over to dist/....
So this has to be added for Sage 9 themes that need fonts/ in dist/...

See this discussion:

External fonts in folder

Hi there, (I actually had this issue last year, and never figured it out, so have been copy/pasting from /assets/ to /dist/ since then!). I’m using some Typography.com fonts, and the way they work (frustratingly) is to provide you with a JS snippet for you site’s head region (pretty standard), but also a folder, named with a random number (in my case 569789), containing production CSS for the fonts, like so: [image] Typography.com then asks you to let them know the location of this folder o…

One doesn’t have to use the copy plugin - depending on the workflow and conversion/style needs, one can also use something like postcss-font-magician (this was more important in the past, now all browsers support WOFF/WOFF2).

[djmtype]

While that worked for yarn lint:styles it still didn’t work for build or start. It will throw the error as before. In the end I still had comment out the lines in webpack.config.js.

new StyleLintPlugin({
failOnError: !config.enabled.watcher,
syntax: 'scss',
})

No biggie. If I really need to lint some css, I’ll use yarn lint:styles.
Anyway, this is more of a stylelint issue not Sage. Thanks again @strarsis

[d_em]

Hi strarsis - having the same issues with font loading etc - would you be able to point me in the direction of a post describing a safe way to use the 9.x branch? Am quite a way through building out the structure and don’t want to break anything else!

[strarsis]

So you get the same error message, as the fonts folder is empty?
Are you using the Sage 9.x branch or the Sage 9.x update branch?

[d_em]

Yeah - just using the Sage 9.x branch. No fonts folder in the distill folder and generates same error. When I remove the fonts from assets and remove font-face declarations all is good. Left the fonts till later so only just seeing this now.`

[d_em]

Discovered it doesn’t work for SVG’s in CSS too…

[strarsis]

I ran the build with latest clean update branch version and the font files are 1) copied over to dist/ and 2) I also get no errors, even with non-existing font files in fonts/.

[strarsis]

What exactly does not work with SVGs?
Referencing SVG image files in SCSS files?
Are you using the latest Sage 9.x update branch version?