Sage "9.1": Please test

sage
51

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.

2 Likes
52

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?

53

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

1 Like
54

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.

55

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!

1 Like
57

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:

1 Like
58

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
1 Like
59

@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.

60

& @strarsis
You can achieve this with a require-dev composer dependency: “filp/whoops”: “^2.1”

61

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:

62

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"
63

Recent dart-sass, which is now the reference SASS implementation, has deprecated the use of / for mathematical divisions, hence warning about its usage. When you don’t want to see these warnings, you have to disable them for dart-sass.


Edit: The quietDeps options should do exactly that - but sadly I found no way yet to enable it:

65

Me neither. Only solution I can come up with is donwgrading to sass 1.32.

//package.json devDependencies
"sass": "~1.32.0",
66

So the reason for why quietDeps option doesn’t prevent these deprecation notices is that the dart-sass JavaScript API currently doesn’t support the quietDeps option, even when sass-loader is passing it correctly to it.


With support for quietDeps added and a new release of dart-sass published, the issue should go away.
67

& @strarsis
Are you saying this should show me js/css errors in the console and browser? I’m familiar with using whoops for PHP debugging but I’m not sure we’re talking about the same thing here.

68

You mean the filp/whoops thing? Yes, I added it as a dependency to the update branch. Apparently requiring it is enough for using it. So when you use the latest update branch or require it yourself with composer, the improved error pages should show up.

69

yes, @Ekeler whoops is just for PHP, not js/css - js and css are handled by the linters in the build tool. Maybe I missed where css/js was mentioned in the conversation. I like having the visual PHP errors in the browser though.

@strarsis really? I actually had to add a function to get whoops working with sage 9.1

     /**
     * Whoops debug
     */
    function registerWhoops() {
      $whoops = new \Whoops\Run;
      $whoops->pushHandler(new \Whoops\Handler\PrettyPageHandler);
      $whoops->register();
    }
    if( WP_DEBUG ) registerWhoops();
70

You mean the friendly-errors-webpack-plugin?


It had to be removed for now as it is unmaintained and it is not compatible with webpack 5.
71

Yeah, I generally use WPS (GitHub - Rarst/wps: WordPress plugin for whoops error handler.) as a WP plugin for PHP error handling, that implements the whoops package as well. Installing it through composer is a better idea actually, though it doesn’t seem to work for me by just adding it as a dependancy. This is a different issue however than what I was previously alluding to so there might have been some miscommunication. In the official Sage 9 branch, whenever there are errors in SCSS or JS linting and the theme won’t compile, there is an error message that shows up full screen as a browser overlay and in the terminal on the watch process. Right now for me, it doesn’t show those but just doesn’t build which makes it very confusing to troubleshoot issues and I have to run “yarn lint” manually. Maybe I’m doing something wrong or is there a flag I’m missing?

72

@Ekeler; @erit: Alright, I re-added the Friendly-errors-webpack-plugin from a maintained, webpack 5-compatible fork.
@Jan-Klaas: This also solves the issue with latest dart-sass logging deprecation notices that can’t be disabled yet, as the plugin first clears the console and then prints the errors/warnings only.