Installing individual components - too many issues with sass imports due to version mismatches

I was using some mdc default components earlier by installing the whole material-components-web package (and the adding the required mark up). Now I have started to slowly migrate to mwc (web components), for cleaner code and obviously because I want web components. I realised that using both mwc and mdc don’t go well together. Meaning, some components work, some, will throw a ton of typescript duplicate identifier errors, because it finds two mdc base classes.

So today, I decided to drop the material-components-web package, and install only those that I require, in order to see if the duplicate identifiers errors go. But, installing only the required components leads to another issue, that is with sass stylesheet imports. I figured out why. A given component has some version, right its 8.*** canary something, but its dependency is at version 7. sass does not find the imports, which is a valid issue. Next, sometimes, even if sass does find the dependency, it will still fail to import it, especially in case of @forwards.

How do I even use these two packages in accordance with each other? I can’t completely switch to mwc, because some components like mdc-card are not available there yet.

Here is an example of the error when I install the whole material-components-web package and then try to use some mwc components in parallel (not in the same component or file, just in the app)

Another error that I face when I install only the required packages from mdc, and some from mwc:

My package.json (with just the individual component installs)

    {
      "name": "my-app",
      "version": "0.0.1",
      "description": "Blah blah",
      "main": "dist/index.cjs.js",
      "module": "dist/index.js",
      "es2015": "dist/esm/index.mjs",
      "es2017": "dist/esm/index.mjs",
      "types": "dist/types/interface.d.ts",
      "collection": "dist/collection/collection-manifest.json",
      "collection:main": "dist/collection/index.js",
      "unpkg": "dist/my-app/my-app.js",
      "files": [
          "dist/",
         "loader/"
      ],
      "scripts": {
          "build": "stencil build --docs",
          "start": "stencil build --dev --watch --serve",
          "test": "stencil test --spec --e2e",
          "test.watch": "stencil test --spec --e2e --watchAll",
          "generate": "stencil generate"
     },
    "dependencies": {
        "@material/button": "^7.0.0",
        "@material/card": "^7.0.0",
        "@material/checkbox": "^7.0.0",
        "@material/form-field": "^7.0.0",
        "@material/mwc-button": "^0.19.1",
        "@material/mwc-formfield": "^0.19.1",
        "@material/mwc-icon-button": "^0.18.0",
        "@material/mwc-list": "^0.18.0",
        "@material/mwc-radio": "^0.19.1",
        "@material/mwc-select": "^0.18.0",
        "@material/mwc-slider": "^0.19.1",
        "@material/mwc-snackbar": "^0.18.0",
        "@material/mwc-switch": "^0.19.1",
        "@material/mwc-textfield": "^0.18.0",
        "@material/radio": "^7.0.0",
        "@material/switch": "^7.0.0",
        "@material/top-app-bar": "^7.0.0",
        "@material/typography": "^7.0.0",
        "@stencil/core": "^2.0.1",
        "@stencil/sass": "^1.3.2",
        "@types/jest": "^26.0.14",
        "@types/node": "^14.11.2",
        "axios": "^0.20.0"
      },
      "license": "MIT",
      "devDependencies": {}
    }

Bug report

Unable to use mwc and mdc together

Steps to reproduce

1. Install m-c-w package for mdc components

2. Install a few mwc components => Duplicate identifiers since mdc base is loaded twice

3. Install individual m-c-w components

4. Install a few mwc components => Sass can’t find some stylesheets for imports since the caller package version is different and the dependency package version is different

Actual behavior

Build failing

Expected behavior

I should be able to use mwc and mcw components together

Screenshots

Added above

Your Environment:

Node 14, Stencil TS

Software	Version(s)
MDC Web	7
Browser	Chrome
Operating System	Windows

[joyzhong]

A few suggestions based on your package.json:

• Ensure that all MWC packages are using the same version (e.g. “@material/mwc-formfield”: “^0.19.1”, “@material/mwc-icon-button”: “^0.18.0” are different currently)
• Remove the components duplicated between MDC and MWC (e.g. seems you’re using both MDC and MWC radio components)

Let me know if you still have trouble afterwards.

[EstebanG23]

Closing due to inactivity. Please feel free to re-open if this is still an issue.