It might be a problem with local flywheel. https://github.com/elegantthemes/create-divi-extension/issues/5 should I just disable addHotMiddleware?
So when this only happens with flywheel it seems to be caused by CORS/networking.
When you run the watch command, does the __webpack_hmr file actually exist in the http root?
How do I check if it exist? https://localhost:3000/__webpack_hmr doesn’t exist if that’s what you mean.
I’ve used this on a couple of projects now and it’s works a treat for me so thank you 
One thing I would like to add back in though is the visual laravel style error log on browser refresh.
How would I go about that?
I can add it if it helps with development.
Was this visual error log there in Sage 9 before?
Or is it from Sage 10?
After upgrading an existing sage 9 theme to this PR, ESlint is throwing errors for each single js file (using vscode):
Definition for rule 'no-async-promise-executor' was not found
Definition for rule 'no-dupe-else-if' was not found
Definition for rule 'no-import-assign' was not found
Definition for rule 'no-misleading-character-class' was not found
Definition for rule 'no-setter-return' was not found
Definition for rule 'no-useless-catch' was not found
Building works, but how do I fix these error messages?
This means that ESlint rules should be used that aren’t installed/available yet.
Either the eslint package version is too old or some eslint rule packages aren’t installed.
Hi strarsis, thanks for getting back to me. Since my package.json has "eslint": "^7.16.0" as devDependency and npm -ls eslint shows eslint@7.27.0, I thought it might have been something else. I also removed all lock files and reïnstalled the node modules.
Apparently, while having lunch, the issues were automagically resolved, the errors are gone now.
Reinstalling/rebooting often fixes the issue
Decided to try a fresh install with bootstrap 5 just to see if I could get a plain theme working without any of my mods.
roots/sage-installer has modified files:
M bin/sage
Discard changes [y,n,v,d,s,?]? n
Install of symfony/translation-contracts failed
Install of symfony/polyfill-mbstring failed
Install of symfony/translation failed
Install of psr/container failed
Install of doctrine/inflector failed
Install of symfony/polyfill-ctype failed
Install of symfony/finder failed
Install of symfony/service-contracts failed
Install of symfony/polyfill-php80 failed
Install of symfony/polyfill-php73 failed
Install of symfony/console failed
[RuntimeException]
Update aborted
npm update runs ok but npm build fails. Lots of the same bootstrap syntax errors and more stuff!
[user-name]@Naomis-MBP test-theme-bs5 % npm run build
> sage@9.0.10 build /Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5
> webpack --progress --config resources/assets/build/webpack.config.js
28% building 1/3 entries 5/10 dependencies 2/4 modulesDEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
252 │ 1: $spacer / 4,
│ ^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_variables.scss 252:6 @import
node_modules/bootstrap/scss/bootstrap.scss 11:9 @import
resources/assets/styles/autoload/_bootstrap.scss 4:9 @import
resources/assets/styles/main.scss 4:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
253 │ 2: $spacer / 2,
│ ^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_variables.scss 253:6 @import
node_modules/bootstrap/scss/bootstrap.scss 11:9 @import
resources/assets/styles/autoload/_bootstrap.scss 4:9 @import
resources/assets/styles/main.scss 4:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($grid-gutter-width, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
350 │ $container-padding-x: $grid-gutter-width / 2 !default;
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_variables.scss 350:23 @import
node_modules/bootstrap/scss/bootstrap.scss 11:9 @import
resources/assets/styles/autoload/_bootstrap.scss 4:9 @import
resources/assets/styles/main.scss 4:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
449 │ $headings-margin-bottom: $spacer / 2 !default;
│ ^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_variables.scss 449:31 @import
node_modules/bootstrap/scss/bootstrap.scss 11:9 @import
resources/assets/styles/autoload/_bootstrap.scss 4:9 @import
resources/assets/styles/main.scss 4:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($input-padding-y, 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
690 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
│ ^^^^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_variables.scss 690:73 @import
node_modules/bootstrap/scss/bootstrap.scss 11:9 @import
resources/assets/styles/autoload/_bootstrap.scss 4:9 @import
resources/assets/styles/main.scss 4:9 root stylesheet
WARNING: 70 repetitive deprecation warnings omitted.
asset styles/main.css 263 KiB [compared for emit] (name: main) 1 related asset
asset scripts/main.js 151 KiB [compared for emit] (name: main) 1 related asset
asset scripts/customizer.js 3.76 KiB [compared for emit] (name: customizer) 1 related asset
Entrypoint main 414 KiB (589 KiB) = styles/main.css 263 KiB scripts/main.js 151 KiB 2 auxiliary assets
Entrypoint customizer 3.76 KiB (2.79 KiB) = scripts/customizer.js 1 auxiliary asset
ERROR in ../../node_modules/bootstrap/dist/js/bootstrap.esm.js 6:0-41
Module not found: Error: Can't resolve '@popperjs/core' in '/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/bootstrap/dist/js'
resolve '@popperjs/core' in '/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/bootstrap/dist/js'
Parsed request is a module
using description file: /Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/bootstrap/package.json (relative path: ./dist/js)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in /Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/resources/assets
single file module
using description file: /Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/package.json (relative path: ./resources/assets/@popperjs/core)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/resources/assets/@popperjs/core doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/resources/assets/@popperjs/core.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/resources/assets/@popperjs/core.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/resources/assets/@popperjs/core.wasm doesn't exist
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/resources/assets/@popperjs/core doesn't exist
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/bootstrap/dist/js/node_modules doesn't exist or is not a directory
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/bootstrap/dist/node_modules doesn't exist or is not a directory
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/bootstrap/node_modules doesn't exist or is not a directory
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/node_modules doesn't exist or is not a directory
looking for modules in /Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules
single file module
using description file: /Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/package.json (relative path: ./node_modules/@popperjs/core)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/@popperjs/core doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/@popperjs/core.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/@popperjs/core.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/@popperjs/core.wasm doesn't exist
/Users/[user-name]/Websites/[website-name]/wp-content/themes/test-theme-bs5/node_modules/@popperjs/core doesn't exist
/Users/[user-name]/Websites/[website-name]/wp-content/themes/node_modules doesn't exist or is not a directory
/Users/[user-name]/Websites/[website-name]/wp-content/node_modules doesn't exist or is not a directory
looking for modules in /Users/[user-name]/Websites/[website-name]/node_modules
single file module
No description file found in /Users/[user-name]/Websites/[website-name]/node_modules/@popperjs or above
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/node_modules/@popperjs/core doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/node_modules/@popperjs/core.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/node_modules/@popperjs/core.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/Websites/[website-name]/node_modules/@popperjs/core.wasm doesn't exist
/Users/[user-name]/Websites/[website-name]/node_modules/@popperjs/core doesn't exist
/Users/[user-name]/Websites/node_modules doesn't exist or is not a directory
looking for modules in /Users/[user-name]/node_modules
single file module
No description file found in /Users/[user-name]/node_modules/@popperjs or above
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/node_modules/@popperjs/core doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/node_modules/@popperjs/core.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/node_modules/@popperjs/core.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/[user-name]/node_modules/@popperjs/core.wasm doesn't exist
/Users/[user-name]/node_modules/@popperjs/core doesn't exist
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./scripts/autoload/_bootstrap.js 4:0-19
@ ./scripts/main.js 5:0-33
webpack compiled with 1 error
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/[user-name]/.npm/_logs/2021-05-25T12_34_04_532Z-debug.log
I have actually managed to get the base theme working again but with the same issue as before, with the filepath but my main concern with that is that it won’t then work when I go to deploy the theme.
The build fails because bootstrap dependency @popperjs/core is missing.
However, Bootstrap v5 (in contrast to v4) already ships with the popper dependency ([Sage 9] Update sage-installer to latest dependencies + webpack 5 by strarsis · Pull Request #43 · roots/sage-installer · GitHub).
Are you sure that you are using Bootstrap v5 and not v4?
Hi @strarsis
I tried a fresh install and selected bootstrap 5 from the options, selecting yes when it asks whether to over write the files.
Ran composer update
Package operations: 11 installs, 3 updates, 0 removals
- Syncing roots/sage-installer (dev-webpack5 9e9442c) into cache
- Installing symfony/translation-contracts (v2.4.0): Extracting archive
- Installing symfony/polyfill-mbstring (v1.22.1): Extracting archive
- Installing symfony/translation (v4.4.24): Extracting archive
- Installing psr/container (1.1.1): Extracting archive
- Installing doctrine/inflector (1.4.4): Extracting archive
- Installing symfony/polyfill-ctype (v1.22.1): Extracting archive
- Installing symfony/finder (v4.4.24): Extracting archive
- Installing symfony/service-contracts (v2.4.0): Extracting archive
- Installing symfony/polyfill-php80 (v1.22.1): Extracting archive
- Installing symfony/polyfill-php73 (v1.22.1): Extracting archive
- Installing symfony/console (v4.4.24): Extracting archive
roots/sage-installer has modified files:
M bin/sage
Discard changes [y,n,v,d,s,?]? n
Selected n
Install of symfony/translation-contracts failed
Install of symfony/polyfill-mbstring failed
Install of symfony/translation failed
Install of psr/container failed
Install of doctrine/inflector failed
Install of symfony/polyfill-ctype failed
Install of symfony/finder failed
Install of symfony/service-contracts failed
Install of symfony/polyfill-php80 failed
Install of symfony/polyfill-php73 failed
Install of symfony/console failed
[RuntimeException]
Update aborted
Then it aborts. Tried deleting the composer.lock file and ran it again - same result.
So I guess it’s not doing the build because its not installing the dependencies?!
In the package.json file it says:
"dependencies": {
"bootstrap": "v5.0.0-beta2",
"jquery": "^3.3.1"
}
Naomi
composer encounters modified files in vendor/ and asks for permission to overwrite these with original package files. You should confirm (y instead n) - but be sure those aren’t modifications you made that you forgot to copy/backup elsewhere.
Yes, this did exist in previous iterations of Sage 9 (shows both in the browser and terminal). It would be great if you could add this back in, I’m often left scratching my head for a second when nothing happens after introducing an extra space that stylelint doesn’t like. Thanks!
Update from tailwindcss-jit project (that is now archived):
As of Tailwind CSS v2.1 this project has been merged with the core Tailwind CSS repository and all future development will happen there.
So this is a nice update as in the future tailwind core/upstream will have this JIT feature built-in.
Relevant:
Did a fresh install as well with bootstrap 5, I had the same issue. Running yarn throws this warning:
warning " > bootstrap@5.0.0-beta2" has unmet peer dependency "@popperjs/core@^2.6.0".
Running yarn build fails, the same errors as meemal posted before. In order to fix it, you can explicitely add popperjs/core:
yarn add @popperjs/core
@Jan-Klaas: Alright, Bootstrap 5.x also requires an explicit popper core 2.x dependency. I added it to the installer. You can re-run composer create project again and see whether it builds now.
& @strarsis
You can achieve this with a require-dev composer dependency: “filp/whoops”: “^2.1”
OK, I added the filp/whoops package as development dependency in update branch.
Sage 10 just requires it and this seems to be it, no further initialization:
Is there a way to prevent the sass warnings about using / for divsion being deprecated?
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Since the new bootstrap 5 still uses it, I guess the warnings will be around for a while unless there’s a way to suppress them.
I tried adding a tilde to the dependency in the package.json, then removing node_modules directory and lockfile, before reinstalling npm dependencies. This was suggested elsewhere (same issue in a vue project). Didn’t work here though.
"sass": "~1.32.12"