static-website
static-website copied to clipboard
cdnjs
Issue with Ubuntu font in development mode
Information
Ubuntu 20.04.6 LTS x86_64 ,github codespace , node v16.20.2
Details
Description
While trying to build a project that includes the Ubuntu font, I encountered a problem. The builder is unable to resolve the file path ./files/ubuntu-latin-300.woff2. This could be due to the file not existing in the specified location or the path being incorrect.
Steps to reproduce
my steps:
- Open a codespace.
- Run
npm ci(ornpm install, i have also tried it) to install the dependencies. - Run
npm run devto start the development server. - open
localhost:3000
Upon doing this, i see the error message.
ERROR Failed to compile with 1 errors friendly-errors 5:18:56 AM
ERROR in ./assets/scss/style.scss friendly-errors 5:18:56 AM
Module build failed (from ./node_modules/css-loader/dist/cjs.js): friendly-errors 5:18:56 AM
Error: Can't resolve './files/ubuntu-latin-300.woff2' in '/workspaces/cdnjs-website/assets/scss'
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:209:21
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/RootPlugin.js:37:38
at _next43 (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/workspaces/cdnjs-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
at /workspaces/cdnjs-website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
at processTicksAndRejections (node:internal/process/task_queues:78:11)
friendly-errors 5:18:56 AM
@ ./assets/scss/style.scss 4:14-224 15:3-20:5 16:22-232
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
if I delete /assets/scss/style.scss line 4 , bugs will not appear
@import "../../node_modules/typeface-ubuntu/index.css";
Expected behavior
Screenshots
I can also reproduce this in development mode.
Interestingly when the site is properly built, it doesn't seem to encounter such an error;
sw_vers
ProductName: macOS
ProductVersion: 14.7.1
BuildVersion: 23H222
node -v
v16.20.2
npm ci
[...]
SITE_HOST=http://localhost:3000/ npm run build
[...]
ℹ Copying static files 19:13:39
✔ Copied static files 19:13:39
ℹ Optimizing images 19:13:39
✔ Optimized static PNG images 19:13:40
✔ Optimized bundled JPG images 19:13:41
✔ Optimized bundled SVG images 19:13:41
ℹ Optimizing fonts 19:13:41
✔ Optimized bundled fonts 19:13:41
ℹ Loading sitemap URLs 19:13:41
ℹ Fetched 4550 libraries in 287ms 19:13:41
ℹ Fetched 4550 libraries in 504867ms: 19:22:06
ℹ p99: 1625ms 19:22:06
ℹ p90: 1218ms 19:22:06
ℹ p50: 1088ms 19:22:06
ℹ Slowest libraries: 19:22:06
ℹ scannerdetection: 5168ms 19:22:06
ℹ angular2-polyfill: 5107ms 19:22:06
ℹ userinfo: 4639ms 19:22:06
ℹ requirejs-tpl: 4093ms 19:22:06
ℹ proteic: 3998ms 19:22:06
ℹ Generating sitemaps with 211,846 URLs 19:22:06
✔ Generated sitemaps 19:22:06
ℹ Generating robots.txt 19:22:06
✔ Generated robots.txt 19:22:06
ℹ Ready to run nuxt start
I'm unsure what would be different about the development mode, but feel free to investigate and open a PR to fix it :)
Yes, using a production environment for building will not result in this issue, which can temporarily resolve the problem.