search

onehilltech / ember-cli-mdc

ember-cli addon for material-components-web
Apache License 2.0
44 stars 15 forks source link

Installation in fresh Ember app causes breaking build #31

Closed madnificent closed 4 years ago

madnificent commented 4 years ago

Installing this addon in an ember 3.19.0 app breaks the build

Steps to reproduce

  1. Make sure you have ember-cli 3.19.0 installed
  2. run ember install ember-cli-mdc-button
  3. Start the server ember s

We run ember in a docker container, so our exact steps have been:

edi ember new ipfs-search-mdc-test
cd ipfs-search-mdc-test
edi ember g route button-test
edi ember install ember-cli-mdc-button
# wait really really long now, but that seems normal
eds --port=4203 --live-reloade-port=49002

Wait for the error to happen:

    ⠋Build Error (SassCompiler) in /app/node_modules/@material/elevation/_mixins.import.scss:2:1

Can't find stylesheet to import.
  ╷
2 │ @forward "@material/feature-targeting" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@material/elevation/_mixins.import.scss 2:1       @import
  node_modules/@material/button/_mixins.scss 23:9                @import
  node_modules/@material/button/mdc-button.scss 23:9             @import
  node_modules/ember-cli-mdc-button/addon/styles/addon.scss 2:9  root stylesheet

Possible causes

Sass compiler

This seems to be a build issue in the Sass compiler. I'm not close enough to it but the sass compiler and/or its configuration seem to be pulled in by this library, I suspect you will have knowledge of this.

Ember version

Did not try to run this with an older Ember version yet. Perhaps some incompatibility popped up there.

Octane

The version of the button that actually gets installed is an Octane version ("ember-cli-mdc-button": "^2.0.0-octane.13"). Octane should obviously work, but perhaps it was accidentally tagged as a release rather than as a beta release; or perhaps I somehow installed it in the wrong way.

Full set of dependencies:

"devDependencies": {
  "@ember/optional-features": "^1.3.0",
  "@ember/render-modifiers": "^1.0.2",
  "@glimmer/component": "^1.0.0",
  "@glimmer/tracking": "^1.0.0",
  "@material/animation": "^6.0.0",
  "@material/base": "^6.0.0",
  "@material/button": "^3.2.0",
  "@material/dialog": "^3.2.0",
  "@material/elevation": "^6.0.0",
  "@material/ripple": "^6.0.0",
  "@material/rtl": "^6.0.0",
  "@material/shape": "^6.0.0",
  "@material/theme": "^6.0.0",
  "@material/typography": "^6.0.0",
  "babel-eslint": "^10.1.0",
  "broccoli-asset-rev": "^3.0.0",
  "ember-auto-import": "^1.5.3",
  "ember-cli": "~3.19.0",
  "ember-cli-app-version": "^3.2.0",
  "ember-cli-babel": "^7.20.5",
  "ember-cli-custom-properties": "^2.0.0",
  "ember-cli-dependency-checker": "^3.2.0",
  "ember-cli-htmlbars": "^5.1.2",
  "ember-cli-inject-live-reload": "^2.0.2",
  "ember-cli-mdc-animation": "^2.0.0-octane.13",
  "ember-cli-mdc-base": "^2.0.0-octane.13",
  "ember-cli-mdc-button": "^2.0.0-octane.13",
  "ember-cli-mdc-dialog": "^2.0.0-octane.13",
  "ember-cli-mdc-elevation": "^2.0.0-octane.13",
  "ember-cli-mdc-form": "^2.0.0-octane.13",
  "ember-cli-mdc-icon": "^2.0.0-octane.13",
  "ember-cli-mdc-ripple": "^2.0.0-octane.13",
  "ember-cli-mdc-rtl": "^2.0.0-octane.13",
  "ember-cli-mdc-sass": "^2.0.0-octane.13",
  "ember-cli-mdc-shape": "^2.0.0-octane.13",
  "ember-cli-mdc-theme": "^2.0.0-octane.13",
  "ember-cli-mdc-typography": "^2.0.0-octane.13",
  "ember-cli-sri": "^2.1.1",
  "ember-cli-uglify": "^3.0.0",
  "ember-data": "~3.19.0",
  "ember-export-application-global": "^2.0.1",
  "ember-fetch": "^8.0.1",
  "ember-load-initializers": "^2.1.1",
  "ember-maybe-import-regenerator": "^0.1.6",
  "ember-modifier": "^1.0.3",
  "ember-qunit": "^4.6.0",
  "ember-resolver": "^8.0.0",
  "ember-source": "~3.19.0",
  "ember-template-lint": "^2.8.0",
  "eslint": "^7.1.0",
  "eslint-plugin-ember": "^8.6.0",
  "eslint-plugin-node": "^11.1.0",
  "loader.js": "^4.7.0",
  "material-design-icons": "^3.0.1",
  "npm-run-all": "^4.1.5",
  "qunit-dom": "^1.2.0",
  "sass": "^1.26.9"
}

Incorrect sass import statement

I have tried to remove the offending import statement from my node_modules directly and restarted the app. A similar statement seems to exist in multiple places so I suspect this not to be the bug.

Jopie01 commented 4 years ago

I have the same issue here. I had an older app running and downgraded most of the ember-cli-mdc-... and @material/.... dependencies to the versions used in that app. Haven't tried to upgrade them it's running and "never change a running system" 😃 . Below my devDependencies

    "@material/button": "3.2.0",
    "@material/card": "3.2.0",
    "@material/checkbox": "3.2.0",
    "@material/chips": "3.2.0",
    "@material/dialog": "3.2.0",
    "@material/drawer": "3.2.0",
    "@material/fab": "3.2.0",
    "@material/form-field": "3.2.0",
    "@material/icon-button": "3.2.0",
    "@material/layout-grid": "3.1.0",
    "@material/linear-progress": "3.2.0",
    "@material/radio": "3.2.0",
    "@material/rtl": "6.0.0",
    "@material/select": "3.2.0",
    "@material/snackbar": "3.2.0",
    "@material/switch": "3.2.0",
    "@material/tab-bar": "3.2.0",
    "@material/textfield": "3.2.0",
    "@material/top-app-bar": "3.2.0",
    "ember-cli-mdc-animation": "1.0.0-alpha.0",
    "ember-cli-mdc-base": "1.0.0-alpha.0",
    "ember-cli-mdc-button": "^1.0.0-alpha.6",
    "ember-cli-mdc-card": "^1.0.0-alpha.18",
    "ember-cli-mdc-checkbox": "^1.0.0-alpha.1",
    "ember-cli-mdc-chips": "^1.0.0-alpha.24",
    "ember-cli-mdc-dialog": "^1.0.0-alpha.10",
    "ember-cli-mdc-dom": "1.0.0-alpha.0",
    "ember-cli-mdc-drawer": "^1.0.0-alpha.1",
    "ember-cli-mdc-elevation": "1.0.0-alpha.1",
    "ember-cli-mdc-fab": "^1.0.0-alpha.1",
    "ember-cli-mdc-floating-label": "1.0.0-alpha.1",
    "ember-cli-mdc-form": "^1.0.0-alpha.0",
    "ember-cli-mdc-form-field": "1.0.0-alpha.1",
    "ember-cli-mdc-htmlbars": "^1.0.0-alpha.0",
    "ember-cli-mdc-icon": "1.0.0-alpha.0",
    "ember-cli-mdc-icon-button": "1.0.0-alpha.18",
    "ember-cli-mdc-layout": "^1.0.0-alpha.0",
    "ember-cli-mdc-layout-grid": "^1.0.0-alpha.0",
    "ember-cli-mdc-line-ripple": "1.0.0-alpha.0",
    "ember-cli-mdc-linear-progress": "^1.0.0-alpha.1",
    "ember-cli-mdc-list": "^1.0.0-alpha.1",
    "ember-cli-mdc-notched-outline": "1.0.0-alpha.1",
    "ember-cli-mdc-radio": "1.0.2",
    "ember-cli-mdc-ripple": "1.0.0-alpha.1",
    "ember-cli-mdc-rtl": "1.0.0-alpha.0",
    "ember-cli-mdc-sass": "1.0.0-alpha.0",
    "ember-cli-mdc-select": "^1.0.0-alpha.21",
    "ember-cli-mdc-shape": "1.0.0-alpha.0",
    "ember-cli-mdc-snackbar": "^1.0.0-alpha.23",
    "ember-cli-mdc-stepper": "^1.0.0-alpha.6",
    "ember-cli-mdc-switch": "^1.0.0-alpha.1",
    "ember-cli-mdc-tab": "1.0.0-alpha.1",
    "ember-cli-mdc-tab-bar": "1.0.0-alpha.1",
    "ember-cli-mdc-tab-indicator": "1.0.0-alpha.0",
    "ember-cli-mdc-tab-scroller": "1.0.0-alpha.1",
    "ember-cli-mdc-tabs": "^1.0.0-alpha.1",
    "ember-cli-mdc-textfield": "^1.0.0-alpha.24",
    "ember-cli-mdc-theme": "^1.0.0-alpha.0",
    "ember-cli-mdc-top-app-bar": "^1.0.0-alpha.19",
    "ember-cli-mdc-typography": "1.0.0-alpha.0",

Can this https://github.com/material-components/material-components-web/pull/5453 have something to do with it?

hilljh82 commented 4 years ago

@Jopie01 Based on the dependency list, you have installed the pre-release version of ember-cli-mdc updated to 3.18 to support Ember Octane in your first post. Unfortunately, since it is a pre-release (including in your second post), it is not supported. I wish npm worked correctly and did not install pre-release versions. But, try the following:

ember install [package-name]@^1.0.0

This will install the latest version in the 1.0.0 series for that component.

madnificent commented 4 years ago

Thanks for the swift responses and for updating the README. The button works now!

You should be able to make a prerelease by running npm publish --tag beta (some more content at https://gist.github.com/adcreare/00a10f389841dd4c97197608c9b33a7f)

hilljh82 commented 4 years ago

@madnificent The problem is that ember keeps installing the pre-releases. From my understanding, that should not be the case and is the source of the headaches. For example, I should be able do the following command:

ember install ember-cli-mdc-button

and that should not install a prerelease version. If I am misunderstanding how npm install works under the hood, then I need to brush up on that documentation.