Hi guys,
Working on my first Sage theme (and loving it for the most part!) but I have a really strange issue with image URLs in my SCSS files…
So I have the following rule:
.bg-dotted { background-image: url(../images/dot-pattern.svg); }
Which is for some reason this is rendered as:
.bg-dotted { background-image: url([object Object]); }
I’m not sure what I am missing here… I’ve Googled the issue but it doesnt seem to be very common and there’s little help around on the subject… I am very new to mix/webpack and although a few seem to suggest it’s related to webpack configuration or dependencies, I haven’t a clue where to start!
Can anyone please point me in the right direction?
Thanks in advance!
Thanks, but after copying over the files from a new Sage install, running composer update seems to go ok but running npm install after deleting package-lock.json gives me:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN enoent ENOENT: no such file or directory, open '/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/css-loader/node_modules/autoprefixer/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/postcss-safe-parser/node_modules/postcss/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/package.json'
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-import-assertions@1.8.0 requires a peer of acorn@^8 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-jsx@5.3.2 requires a peer of acorn@^6.0.0 || ^7.0.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.
removed 33 packages and audited 1449 packages in 5.696s
153 packages are looking for funding
run `npm fund` for details
found 25 vulnerabilities (1 low, 15 moderate, 9 high)
run `npm audit fix` to fix them, or `npm audit` for details```
Those are just warnings. These happen often as npm packages tend to have lots (exponentially increasing) amounts of dependencies and some of them hadn’t been updated for years and tend to rot. When everything builds fine this can be ignored.
Thanks, I did think that, but then when I run npm run build I get the following, which I’d assumed was due to the unsuccessful npm install:
> webpack --progress --config resources/assets/build/webpack.config.js
[webpack-cli] Failed to load '/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'extract-text-webpack-plugin'
Require stack:
- /home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.preset.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/util/desire.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/webpack-cli.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/bootstrap.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/bin/cli.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack/bin/webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.preset.js:3:27)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.preset.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/util/desire.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/webpack-cli.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/bootstrap.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/bin/cli.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack/bin/webpack.js'
]
}
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! /home/tom/.npm/_logs/2021-11-01T19_12_08_189Z-debug.log```
Have you purged the node_modules folder, then run npm install again?
Are you using a recent node LTS version and self-updated npm?
I’m currently using:
❯ node -v
v16.13.0
❯ npm -v
8.1.2
I believe these are both the latest LTS versions?
I have removed my node_modules folder as well as package-lock.json… still getting the same (or similar) error:
❯ npm run build
> sage@9.0.10 build
> webpack --progress --config resources/assets/build/webpack.config.js
[webpack-cli] Failed to load '/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'extract-text-webpack-plugin'
Require stack:
- /home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.preset.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/util/desire.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/webpack-cli.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/bootstrap.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/bin/cli.js
- /home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack/bin/webpack.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.preset.js:3:27)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.preset.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/util/desire.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/resources/assets/build/webpack.config.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/webpack-cli.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/lib/bootstrap.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack-cli/bin/cli.js',
'/home/tom/websites/askmarc/wp-content/themes/askmarc/node_modules/webpack/bin/webpack.js'
]
}
I tried to install extract-text-webpack-plugin but I got an error saying dependencies can’t be resolved - looks like this maybe doesn’t work with webpack 5?
Also noticed on the NPM website it says:
Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
Yes, things have changed again in such a short time. I already made a new branch with the new loaders.
Thanks… how can I update from this branch instead? Do I need to follow the same procedure again from the start to update, and how do I make sure I am using that branch in the new theme I create to copy across? Sorry, this is all quite new to me (although I am loving the actual development workflow and I really appreciate your efforts and help!).
Yes, you just use the other branch for the main files.
Hm, the normal update branch should also just work.
All the npm install issues and package rot is very time-consuming.
You can also try yarn instead of npm. In some instances it works better than npm.