Materialize: Meteor: How can I try new version 1.0.0-beta?

[minhna]

I'm using Meteor, I install by running command: meteor add materialize:materialize. Now I have a new project and want to start with 1.0.0 version of materialize. How can I do that?

Thank you.

[Dogfalo]

Just published it to meteor, try: meteor add materialize:materialize@=1.0.0-beta

[minhna]

Thank you for updating the package.
After install, I've got the error:
Uncaught TypeError: Cannot set property 'Dropdown' of undefined
on line 2841 of file packages/materialize_materialize.js: window.M.Dropdown = Dropdown;

Another error in app/global-imports.js:
Uncaught TypeError: Cannot read property 'Materialize' of undefined
at line: Materialize = Package['materialize:materialize'].Materialize;

I'm using meteor 1.6.1

[Dogfalo]

Potential fix for this issue added in 08bfb6942c759975616ebc23c9a80431135d60ce

[minhna]

How can I apply this update?

[Schangiwalem]

Hello, I have exactly the same issue with this new version of Materializecss like @minhna said.
How can we do to fix it please ?

[Dogfalo]

For now you can clone the repo and follow this to use it as a local package: https://stackoverflow.com/questions/18328000/installing-a-local-package-on-meteor/18328769

[Schangiwalem]

I've already install with the repo, the problem is after, when I build the app, we have some errors.

[Luc-cpl]

I have the same error. Resolve it removing materialize from meteor and add the npm package unstead.

This atmosphere version is a good idea, but unfortunately it does not work properly

[minhna]

@Luc-cpl, how can I use that npm package from meteor?

[Luc-cpl]

@minhna, you need:
1 - install the npm package
meteor npm install materialize-css@next

2 - in main.js import materialize and set global (that way you don´t need to import in every file)

import Materialize from 'materialize-css';
global.M = global.Materialize = Materialize;

3 - in mais.scss, import materialize sass

@import "{}/node_modules/materialize-css/sass/materialize.scss";

[Luc-cpl]

To help with inicializations, I set one folder in my project call "materialize-helpers" to set every change or js inicialization

inside that folder I set one file for js and another for html templates

for exemple, to start floating action buttons:

In helper.html

<template name="floatingActionButton">
  <div id="floatingActionButton-{{this.id}}" class="fixed-action-btn {{this.class}}">
    {{> Template.contentBlock}}
  </div>
</template>

In helper.js

Template.floatingActionButton.onRendered(function(){
  var elem = document.getElementById('floatingActionButton-' + this.data.id);
  M.FloatingActionButton.init(elem, this.data);
});

Than every time that i need to start this:

{{#floatingActionButton id='buttonID' hoverEnabled=false class="my-custom-class" ....  }} // pass the js options in here
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>      
{{/floatingActionButton}}

[minhna]

Thank you @Luc-cpl

[minhna]

@Luc-cpl , I tried to import scss file
@import "{}/node_modules/materialize-css/sass/materialize.scss";
but it said:

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/main.scss: Scss compiler error: File to import:
   {}/node_modules/materialize-css/sass/materialize.scss not found in file:
   /home/minhna/WORK/OTV/choxe2/{}/client/main.scss

Please help.

[minhna]

I checked, the file is existing and the path is correct.

[minhna]

After created a file scss-config.json with following contents:

{
  "includePaths": [
    "{}/node_modules/materialize-css/sass/"
  ]
}

Now I can import in main.scss file:

@import "materialize.scss";

But now I have another error:

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/main.scss: Scss compiler error: File to import: input-fields not
   found in file: components/forms/forms

[Luc-cpl]

@minhna, a quick solution could be copy the path 'sass' from npm_modules to your client folder

When I import the scss I just import in main.scss and it work's on every sass that I import from npm_modules

[Luc-cpl]

According to the meteor documentation you only need to import into main.scss
@import '{} /node_modules/npm-package-name/button.less';

But also according to the documentation "If you are upgrading an application to Meteor 1.3 you may have to run meteor npm install --save meteor-node-stubs manually."

I don't know but it could be your case.

Source: https://guide.meteor.com/using-npm-packages.html

[minhna]

I installed version 1.0.0-rc.1 and update the scss-config.json with content:

{
  "includePaths": [
    "{}/node_modules/materialize-css/sass/",
    "{}/node_modules/materialize-css/sass/components/forms"
  ]
}

It works.

[Daniet]

when using bower you are not downloading the robot source