[material-components] Issues with new 0.12.1 update

[ClashTheBunny]

Hey @r0man,

I'm having trouble with 0.12.1. I'm guessing it has to do with:
material-components/material-components-web@e21ec90
and possibly with:
material-components/material-components-web#767

Do the externs need to be updated for mdc-base? Do I need to refer to mdc-base now instead of mdc? What is the way it should be used?

This is my traceback when I change from 0.10.0 to 0.12.1:

material-components.inc.js:90 Uncaught Error: Cannot find module "@material/base"
    at Object.<anonymous> (material-components.inc.js:90)
    at __webpack_require__ (material-components.inc.js:35)
    at Object.defineProperty.value (material-components.inc.js:81)
    at material-components.inc.js:84
    at webpackUniversalModuleDefinition (material-components.inc.js:14)
    at material-components.inc.js:15
(anonymous)	@	material-components.inc.js:90
__webpack_require__	@	material-components.inc.js:35
Object.defineProperty.value	@	material-components.inc.js:81
(anonymous)	@	material-components.inc.js:84
webpackUniversalModuleDefinition	@	material-components.inc.js:14
(anonymous)	@	material-components.inc.js:15

and

Uncaught ReferenceError: mdc is not defined
    at Object.<anonymous> (material-components.cljs:79)
    at Object.reagent$impl$component$custom_wrapper_$_componentDidMount [as componentDidMount] (component.cljs:188)
    at react-dom.inc.js:4704
    at measureLifeCyclePerf (react-dom.inc.js:4514)
    at react-dom.inc.js:4703
    at CallbackQueue.notifyAll (react-dom.inc.js:948)
    at ReactReconcileTransaction.close (react-dom.inc.js:11361)
    at ReactReconcileTransaction.closeAll (react-dom.inc.js:14768)
    at ReactReconcileTransaction.perform (react-dom.inc.js:14715)
    at ReactUpdatesFlushTransaction.perform (react-dom.inc.js:14702)
(anonymous) @ material-components.cljs:79
mdc-textfield_componentDidMount @ component.cljs:188
(anonymous) @ react-dom.inc.js:4704
measureLifeCyclePerf @ react-dom.inc.js:4514
(anonymous) @ react-dom.inc.js:4703
notifyAll @ react-dom.inc.js:948
close @ react-dom.inc.js:11361
closeAll @ react-dom.inc.js:14768
perform @ react-dom.inc.js:14715
perform @ react-dom.inc.js:14702
perform @ react-dom.inc.js:12807
flushBatchedUpdates @ react-dom.inc.js:12890
closeAll @ react-dom.inc.js:14768
perform @ react-dom.inc.js:14715
batchedUpdates @ react-dom.inc.js:8760
enqueueUpdate @ react-dom.inc.js:12918
enqueueUpdate @ react-dom.inc.js:12516
enqueueForceUpdate @ react-dom.inc.js:12649
ReactComponent.forceUpdate @ react.inc.js:1268
reagent$impl$batching$run_queue @ batching.cljs:39
reagent.impl.batching.RenderQueue.flush_queues @ batching.cljs:86
reagent.impl.batching.RenderQueue.run_queues @ batching.cljs:76
(anonymous) @ batching.cljs:63

I'm including this with:

            [cljsjs.material-components :as mdc]

[r0man]

@ClashTheBunny Not sure what is going on here. It works for the components I am using, but could be that I missed an externs declaration for a component you are trying to use. This looks correct:

[cljsjs.material-components :as mdc]

and after that you should be able to call js/mdc.drawer.MDCTemporaryDrawerFoundation for example.

[ClashTheBunny]

I tried setting up another example and with just :requireing it from cljsjs, I get:

Navigated to http://localhost:3449/cards.html
14:44:00.224 material-components.inc.js:90 Uncaught Error: Cannot find module "@material/base"
    at Object.<anonymous> (material-components.inc.js:90)
    at __webpack_require__ (material-components.inc.js:35)
    at Object.defineProperty.value (material-components.inc.js:81)
    at material-components.inc.js:84
    at webpackUniversalModuleDefinition (material-components.inc.js:14)
    at material-components.inc.js:15

Empty cache, hard reload, :optimizations :none. vanilla reagent-template project.

[ClashTheBunny]

Which version of ClojureScript are you using?

Reagent template uses [org.clojure/clojurescript "1.9.562"].

[r0man]

@ClashTheBunny I tried it yesterday with the latest release. I used it with this repo
https://github.com/r0man/rum-mdc Note, the components in this repo use the foundation classes, and the repo is probably obsolete. Nowadays, I just use attachTo of the MDC components when the component did mount. This seems to work fine.

[ClashTheBunny]

Maybe the build messed up for clojars?

~/.m/r/c/m/0.12.1-0 ❯❯❯ unzip -l material-components-0.12.1-0.jar | grep js$
    10244  06-02-17 04:36   cljsjs/material-components/development/material-components.inc.js
     5981  06-02-17 04:35   cljsjs/material-components-web/common/material-components.ext.js
      214  06-02-17 04:37   deps.cljs

The previous version was 30x bigger:

~/.m/r/c/m/0.10.0-0 ❯❯❯ unzip -l material-components-0.10.0-0.jar | grep js$     master ◼
   337094  05-04-17 10:35   cljsjs/material-components/development/material-components.inc.js
   135102  05-04-17 10:36   cljsjs/material-components/production/material-components.min.inc.js
     5981  05-04-17 10:33   cljsjs/material-components-web/common/material-components.ext.js
      296  05-04-17 10:37   deps.cljs

It also had both a min and a regular version.

Did you just build it locally and then use that? The version in cljsjs seems to be fairly broken, and building it locally gives me a ton of errors:

build.error.txt

2017-06-12T21_23_05_552Z-debug.log.txt

Would this be related to material-components/material-components-web#771 ? Does CircleCI use Node 8 also? I think my computer just updated to 8 also.

[r0man]

@ClashTheBunny Yes, I build it locally with boot package install target on node v8.1.0 and don't see those errors.

[r0man]

Not sure what Circle CI uses. Do you have a link to the build log on Cirlce?

[Deraen]

CI setup uses Node 7.10: https://github.com/cljsjs/packages/blob/master/Dockerfile

Logs are here: https://circleci.com/gh/cljsjs/packages/2125 and they show lots of problems like this:

    ERROR in ./packages/mdc-dialog/index.js
    Module not found: Error: Can't resolve '@material/base' in '/root/.boot/cache/tmp/root/cljsjs/material-components/3xn/g0mg04/material-components-web-0.12.1/packages/mdc-dialog'
     @ ./packages/mdc-dialog/index.js 27:0-46
     @ multi ./packages/mdc-dialog/index.js

[Deraen]

The setup is now updated to use Node 8.1.0. Please test locally if problem was caused by Node 7.10, and if so, create PR to bump the build identifier for a new build.