# Error when compiling with fonts **URL:** https://discourse.roots.io/t/error-when-compiling-with-fonts/20947 **Category:** sage **Tags:** webpack **Created:** 2021-06-13T20:45:36Z **Posts:** 20 ## Post 1 by @djmtype — 2021-06-13T20:45:36Z 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"` --- ## Post 2 by @djmtype — 2021-06-13T20:55:20Z 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? --- ## Post 3 by @djmtype — 2021-06-13T21:15:15Z 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. --- ## Post 4 by @strarsis — 2021-06-14T13:51:46Z You may be interested in the Sage 9.x update branch that fixes all these build, dependency and other issues: e class='quote' data-post="1" data-topic="20067"\> ![](https://discourse.roots.io/user_avatar/discourse.roots.io/strarsis/48/4543_2.png) [Sage "9.1": Please test](https://discourse.roots.io/t/sage-9-1-please-test/20067) [sage](/c/sage/11) > 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… --- ## Post 6 by @djmtype — 2021-06-14T15:02:54Z 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? --- ## Post 7 by @strarsis — 2021-06-14T18:33:07Z The error occurs during the build or when running `lint`? Is it this error (webpack stylelint plugin)? > > > > > - Operating System: Windows 10 > - Node Version: 12.14.1 > - NPM Version: 6.13.6 > - webpack Version: 4.41.2 (using Vue-Cli) > - stylelint-webpack-plugin Version: 1.2.1 > > If it helps we are also using: > - less: 3.10.3 > - less-loader: 5.0.0 > - vue: 2.6.11 > - vue-property-decorator: 8.2.2 > - vue-router: 3.1.3 > - vuex: 3.1.2 > - @vue/cli: 4.1.2 > - @vue/cli-plugin-babel: 4.1.2 > - @vue/cli-plugin-e2e-cypress: 4.1.2 > - @vue/cli-plugin-eslint: 4.1.2 > - @vue/cli-plugin-typescript: 4.1.2 > - @vue/cli-plugin-unit-mocha: 4.1.2 > - @vue/cli-service: 4.1.2 > - stylelint: 13.0.0 > - stylelint-config-standard: 19.0.0 > - stylelint-processor-arbitrary-tags: 0.1.0 > - stylelint-webpack-plugin: 1.2.1 > - typescript: 3.7.4 > - vue-template-compiler: 2.6.11 > > ### Expected Behavior > > When I change one of our `.less` files, should correctly lint our files. > > ### Actual Behavior > > Instead, when it compiles the first time, reports no errors, but when changing a file and hot-reloading, I see the following: > > ``` > WAIT Compiling... > > 98% after emitting StylelintWebpackPlugin > > ERROR Failed to compile with 1 errors > > error > > No files matching the pattern "" were found. > > Type checking in progress... > No type errors found > Version: typescript 3.7.4 > Time: 35274ms > ``` > > ### Code > > ```js > // we are not using a webpack.config.js file, but rather a vue.config.js file > // vue.config.js > const StylelintPlugin = require('stylelint-webpack-plugin'); > > module.exports = { > configureWebpack: { > entry: './src/entry.ts', > plugins: [ > new StylelintPlugin({ > files: ['src/assets/less/ **/*.less', 'src/assets/less/** /*.css'], > lintDirtyModulesOnly: true, > syntax: 'less', > }), > ], > }, > chainWebpack: (config) => { > config.devtool('source-map'); > }, > devServer: { > open: process.platform === 'darwin', > host: '0.0.0.0', > port: 8080, > https: false, > hotOnly: false, > }, > parallel: true, > lintOnSave: 'error', > }; > ``` > > ### How Do We Reproduce? > > This is reproducible by simply creating a new Vue project using the `Vue CLI` and making sure to use the options for using TypeScript and LESS. > > I don't think TypeScript is causing the issue, it just seems this is something specific to the fact that we are using LESS files and not CSS, I say this because I am aware that this other issue https://github.com/nuxt-community/stylelint-module/issues/33 has been fixed with the recent `1.2.1` release, so this is the only different thing I can think of! > > Thank you so much for the help! Edit: [https://github.com/stylelint/stylelint/blob/ef67472d5365097b3923748095b91f081eeda709/CHANGELOG.md#L277](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](https://stylelint.io/user-guide/ignore-code/#files-entirely) > _Your patterns in `.stylelintignore` are always analyzed relative to `process.cwd()` ._ --- ## Post 8 by @djmtype — 2021-06-14T19:06:46Z 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? --- ## Post 9 by @strarsis — 2021-06-14T19:20:15Z > [@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}\"", ``` --- ## Post 10 by @djmtype — 2021-06-14T19:29:02Z Sorry, I totally overlooked your reply before. `--allow-empty-input` --- ## Post 11 by @perryazevedo — 2021-06-14T23:59:09Z 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? --- ## Post 12 by @strarsis — 2021-06-15T00:35:06Z Are you using Sage 9.x update branch or the current release of 9.x? --- ## Post 13 by @strarsis — 2021-06-15T00:47:18Z 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](https://discourse.roots.io/t/external-fonts-in-folder/9533): > > 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](http://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: [Typography.com](http://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`](https://github.com/csstools/postcss-font-magician) (this was more important in the past, now all browsers support WOFF/WOFF2). --- ## Post 14 by @djmtype — 2021-06-15T13:11:35Z 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 --- ## Post 15 by @d_em — 2021-07-09T04:33:26Z 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! --- ## Post 16 by @strarsis — 2021-07-09T10:49:27Z 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? --- ## Post 17 by @d_em — 2021-07-10T04:07:43Z 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.` --- ## Post 18 by @d_em — 2021-07-11T06:32:12Z Discovered it doesn’t work for SVG’s in CSS too… --- ## Post 19 by @strarsis — 2021-07-21T22:48:02Z 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/`. --- ## Post 20 by @strarsis — 2021-07-21T22:49:19Z 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?