Error Loading images in css using resource relative path ../

In the documentation for the theme the advice is to use relative paths for assets in css, like so:

> .brand {
>     background: url(../images/logo.svg);
> }

In my files I have added trees.svg into the /resources/assets/images/ folder and have tried this css:
header{ background-image: url(../images/trees.svg); }

But I get the following error:

Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.relative (path.js:1162:5)
at Object.loader (/Users/naomispirit/Websites/xxxx/wp-content/themes/xxx/node_modules/file-loader/dist/index.js:78:72)
at Object.module.exports (/Users/naomispirit/Websites/xxx/wp-content/themes/xxx/node_modules/url-loader/index.js:37:25)

ERROR in ./resources/assets/images/trees.svg
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.relative (path.js:1162:5)
at Object.loader (/Users/xxx/Websites/xxx/wp-content/themes/xxx/node_modules/file-loader/dist/index.js:78:72)
at Object.module.exports (/Users/xxx/Websites/xxx/wp-content/themes/xxx/node_modules/url-loader/index.js:37:25)

It compiles properly only if I use a file path from the theme root to the dist folder “/wp-content/themes/xxx/dist/” but I am assuming this is not the right thing to do since it’s not what’s in the documentation.

In config.json I have the public path set:
"publicPath": "/wp-content/themes/xxx",

Have I got some setting somewhere wrong? Am very new to this theme and this way of working so may of course just be something very basic I’ve done incorrectly! Help appreciated!

Hi @meemal,

Can you share your config.json file, please?

This is my first time using Sage and I’m experiencing a similar issue. I’m using the default config.json that’s generated when installing it.

In my SCSS, when I use ../ in my path I get the following error in my browser:
Module not found: Error: Can't resolve './images/[IMAGE_NAME].svg' in '/Users/[MY_HOME_FOLDER]/sites/[SITE_NAME]/wp-content/themes/[THEME_NAME]/resources/assets/styles'

When i use ../../ in my path, i get the following error:
Module build failed: Error: resolve-url-loader: CSS error predicate must return an absolute path or the result of calling next()


I did find a workaround which allows me to continue with development for now, but I’ll still search for a better solution in the meantime.

Workaround:
Add a tilde (~) to your path and continue the path from there on, the next directory should be wp-content.

Example:
background-image: url("~/wp-content/themes/my_theme/images/my_image.svg");
ofcourse, “my_theme” and “my_image.svg” should be replaced with your specific needs.

I hope this helps you out in the short term, but do keep in mind that this is only a workaround!

Is this Sage 9, Sage 9 update branch, or Sage 10?

{
  "entry": {
"main": [
  "./scripts/main.js",
  "./styles/main.scss"
],
"customizer": [
  "./scripts/customizer.js"
],
"bootstrap": [
  "./scripts/bootstrap/dropdown.js"
]
  },
  "publicPath": "/wp-content/themes/xxxx",
  "devUrl": "http://localhost",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
"app/**/*.php",
"config/**/*.php",
"resources/views/**/*.php"
  ]
}

Hi Dan. This is the config.json. Basically the untouched autogenerated file.

Thanks, Naomi

Hello.

The theme version is Sage 9.0.10

Naomi

You may want to use this Sage 9.x update branch (“9.1”):

1 Like

Thank you for your help!

Happy to see some good instructions in that post to help me do this!

Hey @meemal ,

What nodejs version do you use?
Try to downgrade it to 12, remove the node_modules folder and run this command into sage folder : yarn && yarn build:production

HI @DanLapteacru

v10.16.0 was what I had running. I tried upgrading to v12.22.1 and did those steps and unfortunately to seems to have caused issues!

There were warnings as I ran yarn

yarn install v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > autoprefixer@10.2.5" has unmet peer dependency "postcss@^8.1.0".
warning " > eslint-loader@4.0.2" has incorrect peer dependency "eslint@^6.0.0 || ^7.0.0".
warning " > eslint-loader@4.0.2" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > file-loader@6.2.0" has incorrect peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > sass-loader@6.0.7" has incorrect peer dependency "node-sass@^4.0.0".
warning " > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "stylelint@^8.0.0".
warning " > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".
[5/5] 🔨  Building fresh packages...
✨  Done in 14.66s.

When I now do yarn build:production It’s failing all over the place.

I thought I would revert back to v10.16.0 but now still getting all of those warnings!

yarn build:production
yarn run v1.22.10
$ webpack --env.production --progress --config resources/assets/build/webpack.config.js
 94% asset optimization                                                              

 ERROR  Failed to compile with 2 errors                                                                                                                   11:05:32 AM

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

Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.relative (path.js:1162:5)
    at Object.loader (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/file-loader/dist/index.js:78:72)
    at Object.module.exports (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/url-loader/index.js:37:25)
    at runLoaders (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at process._tickCallback (internal/process/next_tick.js:61:11)

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

Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.relative (path.js:1162:5)
    at Object.loader (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/file-loader/dist/index.js:78:72)
    at Object.module.exports (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/url-loader/index.js:37:25)
    at runLoaders (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
    at /Users/[username]/Websites/[website]/wp-content/themes/[theme-name]/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

 @ multi ./scripts/main.js ./styles/main.scss

 3 assets
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Feeling in a bit of a pickle now! Ideas of what steps I should take?!

Have you updated the package.json and the webpack related files?
Have you reinstalled the node_modules folder?

I haven’t updated those files. Should I? Not exactly sure what’s invovled in that?

I did delete the node modules folder.

I assume that you already have all your project files under version control (e.g. git) so you can undo/compare your changes.

So in the Sage 9.1 update branch discussion I linked to above there is also a guide for updating an existing Sage 9 theme to it. It involves updating the package.json and also the webpack related config files. This should be easy because those config files are mostly for “glue” and usually only slightly changed.

HI @starsis

I’ll give your reply a try just now thank you! (Just went for what looked like an easier option first). Yes, thankfully work so far all under git!

Naomi

OK, just finished all of that and then when I got to the final step in those instructions ‘npm run build’ then I get this error:

[username]@Naomis-MBP [theme-name] % npm run build

sage@9.0.10 build /Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]
webpack --progress --config resources/assets/build/webpack.config.js

[webpack-cli] SyntaxError: Invalid regular expression: /(\p{Uppercase_Letter}+|\p{Lowercase_Letter}|\d)(\p{Uppercase_Letter}+)/: Invalid escape
    at pathToArgumentName (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack/lib/cli.js:66:4)
    at addFlag (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack/lib/cli.js:170:16)
    at traverse (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack/lib/cli.js:243:21)
    at traverse (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack/lib/cli.js:299:23)
    at traverse (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack/lib/cli.js:248:24)
    at Object.getArguments (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack/lib/cli.js:308:2)
    at WebpackCLI.getBuiltInOptions (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack-cli/lib/webpack-cli.js:591:47)
    at loadCommandByName (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack-cli/lib/webpack-cli.js:732:38)
    at Command.program.action (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack-cli/lib/webpack-cli.js:1260:23)
    at Command.listener [as _actionHandler] (/Users/[username]/Websites/[website-name]/wp-content/themes/[theme-name]/node_modules/webpack-cli/node_modules/commander/index.js:922:31)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! sage@9.0.10 build: `webpack --progress --config resources/assets/build/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the sage@9.0.10 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/[username]/.npm/_logs/2021-05-24T13_15_14_071Z-debug.log
[username]@Naomis-MBP [theme-name] %

This looks like an issue with outdated/incorrect npm packages.
Are you using the new package-lock or yarn lock file from the update branch?`
Have you completely re-installed the npm dependencies?

Thank you for helping! The NPM version is 6.14.13, but now see that there is a v7+.

I had ran npm update and thought it was up to date . I can’t seem to force it to install v.7. npm install --global npm and npm install and npm update -g 7 . - But when I check the version its still saying its 6.14.13.

I used npm install which I believe installs the dependencies? Looked like it ran successfully but with 41 warnings. I didn’t do the audit, should I?

found 41 vulnerabilities (1 low, 40 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

I copied over the entire folder and then just replaced the functions file, the view, scss, images, fonts, config.json and that was it.

Meantime I actually closed down and then restarted, and tried npm run build and this time it seemed to work better, but still with issues. It seems now to choke on lots of bootstrap syntax errors like this:

    node_modules/bootstrap/scss/utilities/_borders.scss 20:13  @import
node_modules/bootstrap/scss/_utilities.scss 3:9            @import
node_modules/bootstrap/scss/bootstrap.scss 43:9            @import
resources/assets/styles/autoload/_bootstrap.scss 4:9       @import
resources/assets/styles/main.scss 4:9                      root stylesheet

WARNING: You probably don't mean to use the color value orange in interpolation here.
It may end up represented as orange, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "orange").
If you really want to use the color value here, use '"" + $color'.

And then after lots of them then there is this error:

    1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 3 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sage@9.0.10 build: `webpack --progress --config resources/assets/build/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sage@9.0.10 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/[username]/.npm/_logs/2021-05-24T16_56_06_481Z-debug.log

Really appreciate your help, thanks.

To fix the interpolation warning:

It would seem strange to me that the fix would involve me changing the bootstrap source files? Unless I’m missing something?

Well, this interpolation thing was added in more recent sass implementation.

Maybe you are using an outdated version of bootstrap?