Error: Can't resolve images/stylesheet (Sage 9.0.10)

[maroluke]

After fresh install of Sage 9.0.10 and run yarn && yarn build i get followoing errors:

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './images/icons/facebook.svg' in '/Users/user/web/project/example.com/site/web/app/themes/sage/resources/assets/styles'

Basically it does not load images and fonts from css like:

.icon-facebook {
  background-image: url("../images/icons/facebook.svg");
}

.icon-instagram {
  background-image: url("../images/icons/instagram.svg");
}

What did i wrong? How can i resolve relative media paths? Is there a bug in the brand new sage version?

Sage: 9.0.10
Tailwind: ^2.0.1
Yarn: 1.22.4
Node: 14.15.1

[maroluke]

Actually it doesn’t load the css properly. But when i open in browser, there is a style path to dist folder:

Why is the right path showing in the DOM but no styles are interpreted?

[Suraj_Sanwal]

I’m having the same problem with sage 9.0.10
Running on Node: 12.14.1

[barglm]

I have same issue:

Module not found: Error: Can't resolve './images/test.svg'

body {
  background: url(../images/test.svg) 0 0 repeat-x;
}

Any idea?

[mikeylythcott]

I am having the same issue too, with the latest sage, 9.0.10

When my css is set to a full, external path, with no quotation marks, my yarn: build or yarn start (watching), complies correctly. Such as:

.next-icon {
  background: url(https://carryonwebsite.s3.amazonaws.com/files/arrow-right-thin-white.png) no-repeat 
center; }

This works, but not with local images I want to use, I have to upload to Amazon S3 and format as above.

=======

But if I do it any other way as a relative path (with single quotes, double quotes, or no quotes), I get this error:

With the relative path and single or double quotes, such as:

background: url('../images/arrow-left-thin-white.png') no-repeat center;

I get

This relative module was not found:

* ./images/arrow-left-thin-white.png in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css- 
loader?{"sourceMap":true}!./node_modules/postcss-loader/dist/cjs.js?{"postcssOptions": 
{"path":"/Users/mikey/Local Sites/crack-the-      
sky/app/bedrock/web/app/themes/sage/resources/assets/build","ctx": 
{"open":true,"copy":"images/**/*","proxyUrl":"http://localhost:3000","cacheBusting":"[name]_[hash:8]","paths": 
{"root":"/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage","assets":"/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage/resources/assets","dist":"/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage/dist"},"enabled": 
{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch": 
["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main": 
["./scripts/main.js","./styles/main.scss"],"customizer":["./scripts/customizer.js"],"fitvids": 
["./scripts/fitvids.js"]},"publicPath":"/app/themes/sage/dist/","devUrl":"http://crack-the-sky.local","env": 
{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!./node_modules/resolve-url- 
loader?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js? 
{"sourceMap":true,"sourceComments":true}!./node_modules/import- 
glob!./resources/assets/styles/main.scss

or with no quotes, and just as is in the Sage documentation

background: url(../images/arrow-left-thin-white.png) no-repeat center;

I get this error:

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './images/arrow-left- 
thin-white.png' in '/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage/resources/assets/styles'
at factoryCallback (/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage/node_modules/webpack/lib/Compilation.js:276:40)
at factory (/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
at resolver (/Users/mikey/Local Sites/crack-the- 
sky/app/bedrock/web/app/themes/sage/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/async/dist/async.js:3888:9
at /Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/async/dist/async.js:1062:13)
at /Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/async/dist/async.js:969:16
at /Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/async/dist/async.js:3885:13
at resolvers.normal.resolve (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:252:11)
at /Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
at loggingCallbackWrapper (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/mikey/Local Sites/crack-the-sky/app/bedrock/web/app/themes/sage/node_modules/tapable/lib/Tapable.js:252:11)

[mikeylythcott]

May have found a temp solution. Looks like it’s an issue withi Sage 9.0.10, and this thread gave me a solution (which is, rolling back to Sage 9.0.9, which works for me and everyone else apparently).

NOTE: I have a sage 9.0.09 theme working perfectly fine. See this thread.

Relative paths to images in CSS doesn't work anymore (ie. background-image path)

I just ran into the issue, create new project from the ground, copied old code from a project of some months ago (working flawlessly in old code) and it just don’t work, debug info doesn’t throw anything interesting… Downgrading to ~2.3.1 with the same version of sage also does the trick. There’s something seriously wrong around here… Mac OS 10.15.6 Yarn 1.22 Node 12.18.3 Sage 9.0.10

But would still love a solution to the 9.0.10 issue

[maroluke]

That’s still my solution as well.
Will try it again soon with a fresh install and let you know if i get it.

[abart]

Same problem as the people above mentioned. Upgraded from 9.0.9 due to missing compatibility of composer 2.0 - same issue. Just yarn build:productionworks properly. Mac OS 11.1, Node 14.15.1, npm 6.14.8, yarn 1.22.10

Seems there is a real problem with 9.0.10!

[Jan-Klaas]

Same story. Clean sage 9.0.10 can’t yarn build or yarn start without errors. Downgrading to 9.0.9 resolves it. Would like to see a proper solution though but it seems no one has found it yet.