Material-components-web: [Webpack] Invalid CSS after "@include mixins"

[DimaChaichan]

Bug report

Hello,
I try to pack mdc with Webpack and Typscript.

In Version 4.0.0
I get this error:

ERROR in [at-loader] ./node_modules/@material/auto-init/index.d.ts:38:16 
    TS2528: A module cannot have multiple default exports.

This is fixed by Version: "^5.0.0-canary.faa9af310.0"
But now I have the error:

ERROR in ./src/frontend/sass/main.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
        on line 24 of node_modules/@material/button/mdc-button.scss

Steps to reproduce

1 Create a Example Project like this.
https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md

1. update mdc: npm i [email protected]
2. run npm: npm start

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| MDC Web | 5.0.0-canary.faa9af310.0
| Browser | chrome
| Operating System | Debian 10

Possible solution

The only way to fix both problems, go to version 2.3.1.

[asyncLiz]

This looks like a duplicate of #5158. A fix has been made, but I don't believe it's released yet.

[asyncLiz]

Edit: Ah never mind, I see your actual problem is with sass!

[cintaccs]

I have the same problem (with the canary releases over npm and using webpack to generate the updated css) - can't find any examples of how to include the changed / new mixins?
it started 2-3 weeks ago. "5.0.0-canary.0d42ee650.0" seems to work - but no later versions.

[DimaChaichan]

I tested now the NPM releases.
The Problem is in release: 5.0.0-canary.faa9af310.0
Release 5.0.0-canary.a4db5fbad.0 works.
Looks like this commit make the problem: https://github.com/material-components/material-components-web/commit/faa9af310d1a18ec2c183830c84eb14d0492feab

[bonniezhou]

Hi, MDC Web is not officially supported on Canary. We recommend using the @latest release.

[cintaccs]

... from my part it was not a support request - as I don't expect you to "support". However the feedback that is delivered here could potentially help improve the library and help the community too... @latest is currently 3 months behind (and projects using the mdc libraries are often not able to wait for 3 month for updates and improvements). Using canary at least give some interim fixes as well as avoid having major breaking changes hit you. As @canary releases are available on npm I think it is not unreasonable that some (including myself) have used "the latest" build before asking further questions or requesting new features. But in any case thanks for the feedback.

[DimaChaichan]

Hi, MDC Web is not officially supported on Canary. We recommend using the @latest release.

Hi bonniezhou,
I try to use the @lastest version.
But I have this problem:

ERROR in [at-loader] ./node_modules/@material/auto-init/index.d.ts:38:16 
    TS2528: A module cannot have multiple default exports.

This is fixed in a Canary version. In the Moment I must use the mini.css file. And this make a lot of problems and I can't use the "power" of SCSS.
I not really understand why the canary visions are on NPM, if this Versions are not ready to use.
I will wait for the new Version, thanks for your feedback.

[asyncLiz]

What version of sass are you using? That canary version is using sass modules, which may be why sass is failing to build.

If you're using an older version, a fix may be to update sass.

[DimaChaichan]

What version of sass are you using? That canary version is using sass modules, which may be why sass is failing to build.

If you're using an older version, a fix may be to update sass.

Hi AsyncLiz,
thanks for your message.

I use the Version [email protected].
This is the last version on NPM.

[abraham]

I was getting

ERROR in ./src/frontend/sass/main.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
on line 24 of node_modules/@material/button/mdc-button.scss

and fixed it by removing node-sass and installing [email protected].

[jamiddd]

I was getting

ERROR in ./src/frontend/sass/main.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
on line 24 of node_modules/@material/button/mdc-button.scss

and fixed it by removing node-sass and installing [email protected].

It worked .. Thanks

[m-alzam]

Hi @abraham

and fixed it by removing node-sass and installing [email protected].

I get this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
2 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
3 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/card/mdc-card.import.scss 3:1  @import

[KolCrooks]

@m-alzam same

[sitterrus]

@m-alzam same

Hi @abraham

and fixed it by removing node-sass and installing [email protected].

I get this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
2 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
3 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/card/mdc-card.import.scss 3:1  @import

here is temporary solution: https://github.com/webpack-contrib/sass-loader/issues/804#issuecomment-586095020

[jkaan]

I indeed have the same error and when I add the workaround it complains that it cannot find the stylesheet.

[abhiomkar]

I created full working example with some of the popular bundlers: Webpack, Rollup & Snowpack.

[sitterrus]

I indeed have the same error and when I add the workaround it complains that it cannot find the stylesheet.

if you see the following

it means that the package is not installed

[wazest]

I was getting

ERROR in ./src/frontend/sass/main.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
on line 24 of node_modules/@material/button/mdc-button.scss

and fixed it by removing node-sass and installing [email protected].

Hi @abraham

I get the same Error ...

ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@forward "@material/animation/variables" as mdc-animation-;
^
@forward is coming soon, but it's not supported in this version of Dart Sass.
╷
1 │ @forward "@material/animation/variables" as mdc-animation-;

Any solution?

[asyncLiz]

CSS modules require sass@^1.23.0. Make sure you're on that version or later to use them.

If you're using sass-loader it will automatically use sass, but you'll need to make sure any traces of node-sass have been fully removed from the project.

If you're continuing to have problems, create a reproduction repository with your package.json and package-lock.json.

[raythurnevoid]

@m-alzam same

Hi @abraham

and fixed it by removing node-sass and installing [email protected].

I get this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
2 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
3 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/card/mdc-card.import.scss 3:1  @import

here is temporary solution: webpack-contrib/sass-loader#804 (comment)

Works with sass ^1.26.10 and MDC 7.0.0