Material-components-web: Problem with building non-current versions of MDC Web

[deap82]

I'm still on version 0.11.1 of the full material-components-web package.
After returning from vacation I suddenly have an issue with building the sass in our build environment.
The build environment runs the exact same scripts as on local dev, using gulp.
The sass is built with npm package "gulp-sass".

The issue seems to be related to an update made on July 14 2017, where a bunch of sass variables were renamed;
https://github.com/material-components/material-components-web/commit/df4ccf94f0d22c6f76dce58024f447b5baea3503

When the build server runs the gulp script, gulp-sass outputs the following error message:

2017-08-07T14:50:58.9621763Z Error in plugin 'sass'
2017-08-07T14:50:58.9621763Z Message:
2017-08-07T14:50:58.9621763Z     node_modules\@material\elevation\_variables.scss
2017-08-07T14:50:58.9621763Z Error: Undefined variable: "$mdc-animation-standard-curve-timing-function".
2017-08-07T14:50:58.9621763Z         on line 122 of node_modules/@material/elevation/_variables.scss
2017-08-07T14:50:58.9621763Z >> mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing
2017-08-07T14:50:58.9621763Z    ------------------------------------------^

It seems to me that the server (when running npm install) has downloaded a more current version of material/elevation/_variables.scss, while material/animation/_variables.scss is still at the point of 0.11.1.

When I'm running locally, using Task Runner Explorer in VS, everything works as expected and by inspecting my local _node_modules_ folder I have verified that I indeed have the 0.11.1 version of mentioned files, IE before the variable rename commit. This is even after running npm install locally several times.

My dependency in package.json looks like this:
"material-components-web": "^0.11.1"

If anyone has any idea on what might go wrong on the build server it would be greatly appreciated. Has something gone wrong with the versioning of the elevation and/or animation package?

I suppose a solution might be to upgrade, at least to the first version released after July 14, but as a lot has happened, that is a task I'm not keen on rushing into without some planning.

[deap82]

I have now tried to upgrade to 0.12.0 and get the same error locally. It's a fact that I'm getting a version of /elevation/_variables.scss that uses "future" variables from the animation package...

I ran npm init and npm install [email protected] in a completely new folder, and have verified that the node_modules folder now contains a version of /elevation/_variables.scss that references variables from the animation package, but the downloaded version of /animation/_variables,scss does not define that variable. The variable is $mdc-animation-standard-curve-timing-function.

[acdvorak]

Thanks for reporting this, and sorry for the trouble it caused you!

Cause

It looks like the animation package got a _minor_ version bump during our release (due to the breaking change from the renamed variables), but packages that depend on it only got a _patch_ version bump.

As a result, npm install happily downloaded dependent packages at the newer patch versions (which reference the new variables), but kept the animation package at the older version (which still has the old variables).

This is definitely a bug in our release process. I would have thought that Lerna would have handled this for us and given all of animation's dependencies a _minor_ version bump too, but evidently it didn't. We'll look into this and do our best to make sure the same thing doesn't happen again in the future.

Workaround

Can you try manually installing a more recent version of @material/animation? E.g.:

npm install --save @material/animation@^0.3.0

[deap82]

Hi! I decided to do the full upgrade yesterday so my problem is gone for now.

I tried your workaround on top of an 0.12.1 installment and obviously the animation package is updated. But there are still references inside the @material folder to the old variable names according to the following:

$mdc-animation-linear-out-slow-in-timing-function
Still referenced from
mdc-simple-menu.scss

$mdc-animation-fast-out-slow-in-timing-function
Still referenced from
_mixins.scss in drawer
_keyframes.scss in ripple
mdc-textfield.scss

I have not investigated further by trying to upgrade also these packages, and I did not set up this installation to actually be run by a sass compiler.

[deap82]

Hi @acdvorak,
there seems to be a similar issue again, after the 0.18.0 release our build environment gives the following sass compilation error:

2017-08-22T06:31:11.8032548Z Error in plugin 'sass'
2017-08-22T06:31:11.8032548Z Message:
2017-08-22T06:31:11.8032548Z     node_modules\@material\theme\_mixins.scss
2017-08-22T06:31:11.8032548Z Error: Invalid style specified! Choose one of primary, accent, background, text-primary-on-primary, text-secondary-on-primary, text-hint-on-primary, text-disabled-on-primary, text-icon-on-primary, text-primary-on-accent, text-secondary-on-accent, text-hint-on-accent, text-disabled-on-accent, text-icon-on-accent, text-primary-on-background, text-secondary-on-background, text-hint-on-background, text-disabled-on-background, text-icon-on-background, text-primary-on-light, text-secondary-on-light, text-hint-on-light, text-disabled-on-light, text-icon-on-light, text-primary-on-dark, text-secondary-on-dark, text-hint-on-dark, text-disabled-on-dark, text-icon-on-dark
2017-08-22T06:31:11.8032548Z         on line 26 of node_modules/@material/theme/_mixins.scss
2017-08-22T06:31:11.8032548Z >>     @error "Invalid style specified! Choose one of #{map-keys($mdc-theme-prope
2017-08-22T06:31:11.8032548Z    -----------^

It seems as long as I don't do an upgrade locally I'm not affected, but the build environment always runs npm install on a new empty folder.

[kfranqueiro]

Indeed, I notice that if I install 0.17.0 now that 0.18.0 is released, there are conflicting dependencies on @material/theme - a number of packages still depend on 0.1.7, while others depend on 0.2.0, but only 0.1.7 gets installed and the 0.2.0 dependencies are marked as extraneous. There are also version conflicts with typography (dialog depends on 0.1.1, but 0.3.0 gets installed) and button (snackbar depends on 0.4.0, but 0.3.11 gets installed).

As Andy mentioned, this seems like a problem with how we're bumping versions during the release process, which we need to investigate.

[AKlaus]

I'm suffering from the same issue (description and steps to reproduce) and I see two problems here:

1. Reference to @material components

The @material package gets implicitly installed along with MDC Web. MDC Web refers to @material components with loosely specified versions (using ^ prefix for versions). Hence, if a new @material minor version has breaking changes, rolling back MDC Web to the previous version won't help. The developer needs to spend hours investigating dependencies under the hood and explicitly installing @material packages of the "right" version.

_Please, be more specific in referring versions of dependent packages._

2. Integration with popular starter kits

My problem (the same as @deap82's two comments above) appeared only when SCSS of MDC Web gets imported into the app in a certain way (in my case, it's a recommended way by AngularClass/angular-starter). Hence, your Angular example wouldn't indicate the problem (examples usually are too simple to pick up a real world problem).

_Please, add an automated test for testing integration with popular starter kits_ (e.g. AngularClass/angular-starter). The test can be very simple (e.g. see my steps).

Update of 31 Aug 2017: After upgrading to MDC v0.19.0 my issue doesn't occur anymore.

[chriscasola]

I was able to fix the "Invalid style specified!" error in my build by upgrading to the latest version of yarn (0.27.5).

[mikegleasonjr]

I just hit this error too and found out the cause...

Module build failed: 
    @error "Invalid style specified! Choose one of #{map-keys($mdc-typography-styles)}";
   ^
      Invalid style specified! Choose one of display4, display3, display2, display1, headline, title, subheading2, subheading1, body2, body1, caption
      in /Users/mike/code/bee/portail-consommateurs/frontend/node_modules/@material/typography/_mixins.scss (line 29, column 5)

It happens when you install mdc-button alone (not the whole material-components-web). It pulls an outdated dependency of typography.

All you have to do is to explicitly install typography.

I guess a CI environment could build each component individually to check if the dependencies are ok. After all, the _a la carte_ features is an appealing point.

[deap82]

With the latest release there seems to be another case regarding this.
Our build environment now reports;

2017-10-03T11:02:18.3231481Z Message:
2017-10-03T11:02:18.3231481Z     node_modules\@material\checkbox\mdc-checkbox.scss
2017-10-03T11:02:18.3231481Z Error: Mixin mdc-theme-prop has no parameter named $edgeOptOut
2017-10-03T11:02:18.3231481Z         on line 101 of node_modules/@material/checkbox/mdc-checkbox.scss
2017-10-03T11:02:18.3241494Z >> clude mdc-theme-prop(background, primary, $edgeOptOut: true);
2017-10-03T11:02:18.3241494Z    ------------------------------------------^

My dependency in package.json looks like this:
"material-components-web": "^0.19.0",

@acdvorak Do you have any ETA on this issue?

[acdvorak]

@deap82 No ETA yet, but we have an issue in our internal tracker to investigate and fix these version mismatches. Hopefully we'll be able to take a look at it soon.

In the meantime, try @mikegleasonjr's suggestion - that should at least give you a temporary workaround until we smooth out the versioning issues.

[deap82]

@acdvorak @mikegleasonjr As I understand the issue and the suggestion, for the next release there might be another package I would need to install explicitly. As a workaround I'll probably set up some gulp task that copies all the mdc files to a folder I'll commit into source control, and direct my imports to those files. That way the build environment won't depend on the files installed by npm install.

My current workaround is to do the upgrade, but that is obviously a bit inconvenient.

[nicholaschiang]

@acdvorak @mikegleasonjr I just experienced a similar problem with @material/checkbox ^4.0.0 and it's usage of @material/ripples (also ^4.0.0) $ripple-target Sass mixins:

    ERROR in ./packages/app/styles/dialogs.scss                                                                                                    
    Module build failed:     
        @include mdc-states($color: $color, $query: $query, $ripple-target: $mdc-checkbox-ripple-target);                                                                                                                                  ^                                 
          Mixin mdc-states has no parameter named $ripple-target                                                                                  
          in /home/nchiang/repos/tutorbook/src/app/node_modules/@material/checkbox/_mixins.scss (line 386, column 57)                                
     @ multi ./packages/app/styles/main.scss ./packages/app/styles/cards.scss ./packages/app/styles/welcome.scss ./packages/app/styles/dialogs.scss ./packages/app/styles/settings.scss ./packages/app/styles/schedule.scss ./packages/app/styles/chat.scss ./packages/app/styles/profile.scss ./packages/app/styles/loader.css ./packages/app/styles/payments.c
ss ./packages/app/styles/clock.css ./packages/app/styles/fonts.css ./packages/app/styles/user.css ./packages/app/styles/search.css ./packages/app/styles/filters.css ./packages/
app/styles/history.css ./packages/app/styles/matching.css                                       

    ERROR in ./packages/app/styles/dialogs.scss                                                                                                       
    Module build failed: ModuleBuildError: Module build failed:                                  
        @include mdc-states($color: $color, $query: $query, $ripple-target: $mdc-checkbox-ripple-target);
                                                           ^                                                                                                                    
          Mixin mdc-states has no parameter named $ripple-target
          in /home/nchiang/repos/tutorbook/src/app/node_modules/@material/checkbox/_mixins.scss (line 386, column 57)                                                  
        at runLoaders (/home/nchiang/repos/tutorbook/src/app/node_modules/webpack/lib/NormalModule.js:195:19)
        at /home/nchiang/repos/tutorbook/src/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11                          
        at /home/nchiang/repos/tutorbook/src/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
        at context.callback (/home/nchiang/repos/tutorbook/src/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at Object.asyncSassJobQueue.push [as callback] (/home/nchiang/repos/tutorbook/src/app/node_modules/sass-loader/lib/loader.js:55:13)
        at Object.done [as callback] (/home/nchiang/repos/tutorbook/src/app/node_modules/neo-async/async.js:7974:18)
        at options.error (/home/nchiang/repos/tutorbook/src/app/node_modules/node-sass/lib/index.js:294:32)              
     @ ./packages/app/styles/dialogs.scss                                                                                                                                       
     @ multi ./packages/app/styles/main.scss ./packages/app/styles/cards.scss ./packages/app/styles/welcome.scss ./packages/app/styles/dialogs.scss ./packages/app/styles/settin
gs.scss ./packages/app/styles/schedule.scss ./packages/app/styles/chat.scss ./packages/app/styles/profile.scss ./packages/app/styles/loader.css ./packages/app/styles/payments.c
ss ./packages/app/styles/clock.css ./packages/app/styles/fonts.css ./packages/app/styles/user.css ./packages/app/styles/search.css ./packages/app/styles/filters.css ./packages/
app/styles/history.css ./packages/app/styles/matching.css                                                                                                                       

I still haven't been able to fix this, so any help would be greatly appreciated.

[abhiomkar]

@nicholaschiang That happens mostly because of version mismatch, for example, @material/ripple might be still on v3.2.0 where as the @material/checkbox is at v4.0.0 (latest). I would advice you to upgrade all @material/* packages to v4.0.0 (If that is what you intended) instead of upgrading just one material package.