Thanks so much to @knowler-
I can confirm that this works very well without error on a fresh Sage 9 install.
What steps would be required to update a recent Sage 9 install running TW 1.9.6?
Using the same webpack.config.preset.js, 1.9.6 seems to work if you just set tailwindcss to that in the package.json and then still install postcss as a dev dependency. Also, make sure all the classes that are used are whatever they are for that version.
@knowler Thank you for putting this together. I followed your install instructions and everything has worked fine so far except when defining fonts in my main.scss I get the following error.
Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
Iām using @font-face in main.scss the same as I have in previous Sage projects:
@font-face {
font-family: "Raleway";
src: url("../fonts/Raleway-VariableFont_wght.ttf");
font-weight: 100 900;
font-style: normal;
}
If I remove my @font-face rule then build works with no errors.
In my package.json I have:
"devDependencies": {
"autoprefixer": "^10.0.1",
"browser-sync": "^2.26.13",
"browsersync-webpack-plugin": "^0.6.0",
"bs-html-injector": "~3.0",
"buble-loader": "^0.4.1",
"cache-loader": "~1.2.5",
"clean-webpack-plugin": "^0.1.18",
"copy-globs-webpack-plugin": "^0.2.0",
"css-loader": "^0.28.11",
"cssnano": "^4.0.5",
"eslint": "~4.19.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.14.0",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "^6.2.0",
"friendly-errors-webpack-plugin": "^1.6.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"import-glob": "~1.5",
"node-sass": "^5.0.0",
"postcss": "^8.2.1",
"postcss-loader": "^4.0.4",
"postcss-safe-parser": "^5.0.2",
"resolve-url-loader": "^3.1.2",
"rimraf": "^3.0.2",
"sass-loader": "~6.0.7",
"style-loader": "^0.23.1",
"stylelint": "^13.7.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^0.10.5",
"tailwindcss": "^2.0.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^4.1.1",
"webpack": "~3.10.0",
"webpack-assets-manifest": "^1.0.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "^2.22.3",
"webpack-merge": "~4.1.4",
"yargs": "^16.1.0"
},
Has anyone else had this issue? Thanks in advance for any help or suggestions.
Having the exact same issue. Canāt reference any fonts or images in the scss or it throws the error
Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
Below is our package.json
{
"name": "sage",
"version": "9.0.10",
"author": "Roots <team@roots.io>",
"homepage": "https://roots.io/sage/",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/roots/sage.git"
},
"bugs": {
"url": "https://github.com/roots/sage/issues"
},
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
"scripts": {
"build": "webpack --progress --config resources/assets/build/webpack.config.js",
"build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
"build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
"start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
"rmdist": "rimraf dist",
"lint": "npm run -s lint:scripts && npm run -s lint:styles",
"lint:scripts": "eslint resources/assets/scripts resources/assets/build",
"lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
"test": "npm run -s lint"
},
"engines": {
"node": ">= 8.0.0"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"browser-sync": "^2.26.13",
"browsersync-webpack-plugin": "^0.6.0",
"bs-html-injector": "~3.0",
"buble-loader": "^0.4.1",
"cache-loader": "~1.2.5",
"clean-webpack-plugin": "^0.1.19",
"copy-globs-webpack-plugin": "^0.2.0",
"css-loader": "^0.28.11",
"cssnano": "^4.0.5",
"eslint": "~4.19.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.14.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"import-glob": "~1.5",
"node-sass": "^5.0.0",
"postcss": "^8.2.1",
"postcss-loader": "^4.0.4",
"postcss-safe-parser": "^5.0.2",
"resolve-url-loader": "^3.1.2",
"rimraf": "^3.0.2",
"sass-loader": "~6.0",
"style-loader": "^0.23.1",
"stylelint": "^13.8.0",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^0.10.5",
"tailwindcss": "^2.0.2",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^4.1.1",
"webpack": "^3.12.0",
"webpack-assets-manifest": "^1.0.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "^2.22.3",
"webpack-merge": "^4.1.5",
"yargs": "^16.2.0"
},
"dependencies": {
"graceful-fs": "^4.2.4",
"jquery": "^3.3.1",
"node": "^14.15.2",
"webpack-dev-server": "^3.11.0"
}
}```@abgregs @octoxan Can one of you make a minimal reproduction of this issue in a git repo for me to assess?
@knowler @octoxan Here is minimal reproduction I made. I followed your install instructions on a fresh project. After installing, yarn build compiles successfully with no issues. Then, the only other thing I did is throw a file in the fonts folder and attempt to define a new @font-face rule in main.scss and I get the same error.
https://github.com/abgregs/sage-test
Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The āfromā argument must be of type string. Received undefined
at validateString (internal/validators.js:121:11)
at Object.relative (path.js:1053:5)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/file-loader/dist/index.js:78:72)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/url-loader/dist/index.js:127:19)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
at processTicksAndRejections (internal/process/task_queues.js:75: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 undefined
at validateString (internal/validators.js:121:11)
at Object.relative (path.js:1053:5)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/file-loader/dist/index.js:78:72)
at Object.loader (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/url-loader/dist/index.js:127:19)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at runSyncOrAsync (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
at iterateNormalLoaders (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array. (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
at /Users/austingregersen/Local Sites/sage-test/app/public/wp-content/themes/sage-test/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
1 Like
Thanks for creating that! I pulled it and got the same error (I reinstalled the Node modules with Node 12).
My first guess is that itās an issue with file-loader. Out of curiosity, created a vanilla Sage 9 project and copied the font stuff over. I got a different error.
ā· yarn build
yarn run v1.22.10
$ webpack --progress --config resources/assets/build/webpack.config.js
95% emitting
ERROR Failed to compile with 2 errors 3:58:06 PM
error in ./resources/assets/styles/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file:///Users/knowler/code/roots/sage-9/resources/assets/styles/main.scss:9446:3
at encodeError (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:219:12)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:14)
at /Users/knowler/code/roots/sage-9/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:5)
@ multi ./scripts/main.js ./styles/main.scss
error in ./resources/assets/styles/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file:///Users/knowler/code/roots/sage-9/resources/assets/styles/main.scss:9446:3
at encodeError (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:219:12)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:14)
at /Users/knowler/code/roots/sage-9/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:5)
Asset Size Chunks Chunk Names
scripts/main.js 243 kB 0 [emitted] main
scripts/customizer.js 3.24 kB 1 [emitted] customizer
scripts/main.js.map 396 kB 0 [emitted] main
scripts/customizer.js.map 3.08 kB 1 [emitted] customizer
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This should have worked so I think thereās another underlying issue with the webpack config. I will continue to investigate this.
1 Like
I got it working on a Sage 9 install upgrading the following packages to those versions:
"autoprefixer": "^10.1.0",
"postcss": "^8.2.1",
"postcss-loader": "^4.0.4",
"tailwindcss": "^2.0.2",
I had also to remove some āwrongā classes on the generated preset, mainly on _form.scss.
Now Iām looking to get rid of SCSS and use PostCSS only.
1 Like
@ciromattia @knowler Hmm. Those changes didnāt work for me. They didnāt seem to cause any other issues, so I left them and then looked at downgrading resolve-url-loader and file-loader to previous versions or before breaking changes as those seemed most likely to be responsible based on the error message I was still getting.
The one change that removed any errors was moving to file-loader@5.1.0, which allowed me to successfully compile, however despite having no errors and the styles being applied, Iām not actually seeing the font display. In other words, the styles are applied and the font file appears to have loaded, but there is no actual change in appearance to the text itself. See attached. This font should be bold and set to Raleway but instead still has the same Tailwind defaults I had been seeing previously.
Should look like
Hoping Iām not creating too big a mess here with version or dependency issues for these different packages. @ciromattia Your fonts were imported without error and on the front end they show up as expected?
This PR may fix the issue: https://github.com/roots/sage/pull/2603
1 Like
@strarsis Thanks, I bumped file-loader down to 4.3.0 corresponding to the version used in that PR and fonts and Tailwind are working as expected for me without any issue.
3 Likes
Working Sage 9, Webpack 5 and Tailwind 2.0.2 repo available here with updated theme installation instructions. Browsersync works again!
***IGNORE, there are issues
-The thread that lead to this. Thanks for all the help @strarsis
After further investigation, RTFM and some mangling with webpack5 I got a completely working Sage 9 / TailwindCSS 2 / Webpack 5 / PostCSS 8 setup.
Itās a quite heavily customized sage install, so your mileage may vary, the main customizations are:
- needs Node 10+ (webpack 5 requirement)
- itās TailwindCSS-tailored so if you want Bootstrap back you have to restore almost oll the styles and even jquery dependency
- yeah, jquery is no more a dependency
- itās CSS-based so if you want to use SASS you have to rename the styles, though webpack config should support it out-of-the-box (but I made no tests); PostCSS manages imports, nesting and autoprefixing and TailwindCSS every other feature, so you should ask yourself if you really need SASS with an utility-first framework
- uses webpack 5 new Assets Modules so
file-loaderandurl-loaderare gone for good
@joshb the watcher should be fully working, if you want to try it out.
The branch is 9-webpack5-tailwind2
1 Like
I just setup your fork and at first I was still getting the reloading browsers looping thingā¦ but it appears to have gone away for now:
[Browsersync] Reloading Browsers... (buffered 83 events)
[Browsersync] Reloading Browsers... (buffered 6 events)
[Browsersync] Reloading Browsers... (buffered 131 events)
Other than that, blade files are updating quickly and css files are injecting! Great news! It will be a little strange not running scss when needed but otherwise, this is nice. Thanks.
Iāll report back if I have issues with the browsersync loop thingymabobber.
I just got an issue with sage JS route mechanism not firing when watching, itās an issue with the vanilla JS I changed in main.js so if your JS isnāt working change the last snippet in main.js with the following:
if (document.readyState !== 'loading') {
routes.loadEvents();
} else {
document.addEventListener('DOMContentLoaded', () => {
routes.loadEvents();
}, false);
}
Thank you! This is exactly what I was thinking of trying to build today, but this is so much better.
1 Like
So this is an interference of the sage routing with browser sync?
@strarsis with JQuery everything works flawlessly probably the ready() function does something under the hood, but I was trying to get rid of jQuery.
I assume that browsersync for some reason doesnāt emit DOMDocumentLoaded event, so I tried with the āupdateā method and it works:
if (document.readyState !== 'loading') {
routes.loadEvents();
}
1 Like
I am testing this starter but unfortunately there is a problem. During yarn build: production purgecss removes almost all styles. The yarn build command loads all, even unused, styles. Tested on node12 and node14. Can you help me?
Are you using Sage 9, the Sage 9.1 update branch or Sage 10?