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

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 2. update mdc: npm i material-components-web@5.0.0-canary.faa9af310.0 3. 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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 21 (6 by maintainers)

Commits related to this issue

Remove node-sass and add temporary workaround for sass-loader. - Source1 (remove node-sass): https://github.com/material-components/material-components-web/issues/5502#issuecomment-586061492 - Source... — committed to esso23/MatBlazor by esso23 4 years ago

Most upvoted comments

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

+30

abraham on Feb 14, 2020

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

abhiomkar on Feb 19, 2020

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.

asyncLiz on Feb 25, 2020

Hi @abraham

and fixed it by removing node-sass and installing sass@1.25.0.

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

alcarazzam on Feb 15, 2020

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

bonniezhou on Jan 24, 2020

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

cintaccs on Jan 24, 2020

@m-alzam same

Hi @abraham

and fixed it by removing node-sass and installing sass@1.25.0.

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

sitterrus on Feb 18, 2020