How to installl MDB in a Meteor 1.2.x setup

Topic: How to installl MDB in a Meteor 1.2.x setup

robert@dunderon.se free asked 8 years ago

Hi, after struggling with FezVrasat:bootstrap-material-design a couple of days I'm ready to try MDB instead. Is there any best practices how to install MDB in a Meteor 1.2.x project? My project will be upgraded to Meteor 1.3.x later when all packages I'm using have been tested according to the new 1.3 standards.

Add comment

Adrian Sawicki free answered 7 years ago

0 0 Best answer

Hello, Unfortunately, we aren't currently supporting meteor. Regards

eytanronen pro commented 6 years ago

Hello, I just purchased the pro package and am not able to install on Meteor, any update on this since this last post?

Add comment

james.scaggs pro answered 7 years ago

0 0 Best answer

One quick update, I've since commented out CDN links to bootstrap and tether and moved the mdb.min.js script to the footer and now the MDB JS is working. I'm still getting the jQuery is not defined console error in mdb.min.js though. Anyone know how to fix that?

Add comment

james.scaggs pro answered 7 years ago

0 0 Best answer

I know that Meteor already uses jQuery but I think the issue is that it's trying to load mdb.min.js before jquery.

<pre><code><head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css" />
	
  
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  
  <script type="text/javascript" src="../node_modules/mdbootstrap/js/tether.min.js"></script>
  
  <script type="text/javascript" src="../node_modules/mdbootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
	<title>Meteor App MDB</title>
</head>
<body>
	<div id="render-target"></div>
</body></code></pre>

Console error screenshot - https://screencast.com/t/MeaJr3nxWmo

Please insert min. 20 characters.

Are there any further updates on this? I am trying to use with Meteor 1.4.x and am getting jQuery not defined in mdb.min.js console error. I installed via npm and have also tried using CDN links, both are giving same error. The CSS is working fine but the JS isn't. I know that Meteor already uses jQuery but I think the issue is that it's trying to load mdb.min.js before jquery.

<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css" />
	<!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="../node_modules/mdbootstrap/js/tether.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="../node_modules/mdbootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
	<title>Meteor App MDB</title>
</head>
<body>
	<div id="render-target"></div>
</body>

Console error screenshot - https://screencast.com/t/MeaJr3nxWmo

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

Do you get any console logs?

Add comment

zoran.spoja pro answered 7 years ago

0 0 Best answer

Hello This solution doesn't work for me. For unknown reason i have to put this in .scss file: @import "../../node_modules/material-design-bootstrap/sass/mdb.scss"; After that I have scss rendered, but js doesn't work. I feel that something is missing but I don't know what. Can you help me?

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

@aajaji_m I'm glad you found a solution :)

Add comment

aajaji_m pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Gilbert, I'm also intereset in a NPM package because i'm learning Meteor (1.4.x now). But, in the meantime I found solution for this. -> 1: Unzip the pro version .zip file -> 2: Copy/paste the content into [yourAppFolder]/node_modules/material-design-bootstrap -> 3: Create a package.json file and add it to the previous folder, with following content (simple but works): { "name": "materiel-design-bootstrap", "version": "4.2.0", "description": "Material Design for Bootstrap", "main": "js/mdb.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "MDB", "license": "ISC" } -> 4: In your "client" folder, add the folowing line to the "main.scss" file: @import "{}/node_modules/materiel-design-bootstrap/sass/mdb.scss"; -> 5: Enjoy :)

Add comment

Gilbert Mizrahi free answered 7 years ago

0 0 Best answer

I want to learn how to use with Meteor 1.4. I installed it using npm, but then what I need to import in the place I want to build my component (with React)? I couldn't find any examples or documentation. And I think support is not very proactive, unfortunately, but I hope they will prove me wrong.

Add comment

kurapikats free answered 7 years ago