Would you mind explaining your process? When I install sage 9 and include tailwind, then update tailwind using the method you say worked for you, I still get the same errors as I’ve posted above.
Thanks!
Just caught this now and pasting here for those looking… Simon Swiss over at Tailwind Labs dove into Sage 9 and posted this. I’ll give it a go tomorrow.
https://github.com/tailwindlabs/tailwindcss/discussions/2941#discussioncomment-145518
I have now tried a new installation (Sage 9.0.10) and updated to Tailwind 2.
- Did not work.
Then i did: npm uninstall tailwindcss postcss autoprefixer and npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
- Now this did not work because of the postcss-loader.
So i downgraded postcss-laoder 4 to 3: npm uninstall postcss-loader and npm i -D postcss-loader@3
- Now it works.
Because of your hint i upgraded postcss-loader to v4 again and changed the webpack.config.preset.js like mentioned in https://github.com/tailwindlabs/tailwindcss/discussions/2941#discussioncomment-145518 .
- It works too.
Hey everyone. I tagged a release, 1.6.4, in sage-installer which includes Tailwind 2 support. Still gotta get that dependency bump merged into the Sage 9 branch and tag a new Sage 9 release, but if you want to use it in the meantime, do the following:
# This presumes you already have a Sage project started (either Composer created or Git cloned at the latest 9 tag)
# Update Sage Installer to 1.6.4
$ composer update roots/sage-installer
# Run the preset (might need to change the forward slashes to back slashes on Windows, I forget how that works)
$ ./vendor/bin/sage preset
1 Like
I still can’t get this to work.
My process goes like:
- Install Sage 9
- Choose Tailwind as the preset
- Update sage-installer
- Run the preset, choose Tailwind
- Run yarn && yarn build
Still get these errors:
ERROR Failed to compile with 2 errors 5:28:39 PM
error in ./resources/assets/styles/main.scss
Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
at validate (/Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/schema-utils/dist/validate.js:104:11)
at Object.loader (/Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/postcss-loader/dist/index.js:43:29)
at /Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/webpack/lib/NormalModule.js:195:19
at /Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:233:18
@ multi ./scripts/main.js ./styles/main.scss
error in ./resources/assets/styles/main.scss
Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
at validate (/Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/schema-utils/dist/validate.js:104:11)
at Object.loader (/Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/postcss-loader/dist/index.js:43:29)
at /Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/webpack/lib/NormalModule.js:195:19
at /Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Volumes/LaCie/_development/_trellis/_hybrid/trellis.project.build/site/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:233:18
I am unable to reproduce this using your instructions. It seems like either your Sage 9 install isn’t the latest or the Sage Installer update isn’t being brought in.
Now, I actually remembered that there are some easier directions I can give for using the update to Sage Installer:
$ composer create-project roots/sage my-sage-project dev-9-tailwind-2
This creates the Sage project called my-sage-project using the 9-tailwind-2 branch (which uses roots/sage-installer at 1.6.4). I will see what I can do about getting this merged + tagged soon, so that you don’t need to specify the branch.
Even using this, I still did run into an error, but I was able to resolve it. The error was that Autoprefixer expects PostCSS 8 to be directly installed (yarn add postcss --dev), so I did that and I was able to build for development (yarn build) and production (yarn build:production) using Node 12 (Tailwind 2 requires Node 12 and greater).
TL;DR: until I get a solution tagged for Sage 9, you can do the following:
# Create a new project using the Sage 9 branch that uses Sage Installer 1.6.4
$ composer create-project roots/sage my-sage-project dev-9-tailwind-2
# Make sure you are using at least Node 12.13.0
# I use Volta for this: volta pin node@12
# Bump the PostCSS dependency to 8 (how I do it here is sloppy, but this is a temporary solution)
$ yarn add postcss --dev
# Run a build to confirm it works
$ yarn build
1 Like
Thanks a bunch @knowler-
I will give it a try a bit later this afternoon and let you know.
Much appreciated!
1 Like
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?
@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