'How to use MaterializeCSS in nodejs?

I have run the following commands:

npm install materialize-css --save
npm install hammerjs --save
npm install jquery --save

And then in my app.js, var materialize = require('materialize-css');

but I'll always get the same error when I run npm start:

/Users/myname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1
eof require?$=require("jquery"):$}jQuery.easing.jswing=jQuery.easing.swing,jQu
                                                                    ^
TypeError: Cannot read property 'swing' of undefined
    at Object.<anonymous> (/Users/nyname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1:195)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/myname/code/websites/n-website/app.js:9:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

I can't find anyone else having these issues so it must be the way I'm trying to utilize MaterializeCSS. What am I doing wrong? I just want to be able to display a failure toast using materialize.toast("Message sent", 5000);. Nothing fancy.

node.jsmaterialize


Solution 1:[1]

Materializecss is a frontend framework for the gui / website and not for your server side js application

Solution 2:[2]

Did you explicitly require jQuery as well? And before materialize-css too?

Solution 3:[3]

I found the following on the node_modules/jquery/README file:

Node

To include jQuery in Node, first install with npm.

npm install jquery

For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.

require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); });

Hope that helps you.

Solution 4:[4]

Materializecss is a frontend framework for the gui / website and not for your server side js application. You cannot code your Materialize stuff on serverside node.js. You have to link the materialize css file and materialize js file on the html file that you are going to materialize. you can download materialization css and js file from below link.

Get started with materialize-css might be useful for your reference. Tutorialspoint environment setup can be useful for your reference.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
  <head>
    <title>Sample materialization</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--materialize.css from my website directory stylesheets/-->
    <link type="text/css" rel="stylesheet" href="stylesheets/materialize.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  
  
  <body>

    <!--Import jQuery before materialize.js-->
    <!--Import materialize.js from my website directory materialization-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="materialization/materialize.js"></script>
  
    <!--simple materialized division-->
    <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
    
  </body>
</html>

Solution 5:[5]

If you use handlebars, you can usually call Materialize.css by the tag in the main.handlebars file located in the layouts folder just set your static file call in app.js.

In app.js: app.use (express.static ('public'))

In main.handlebars: link rel = "stylesheet" href = "css / materialize.min.css"

once configured, the static file folder, href gets the following path public / css / materialize.min.css

Here is a project link in node.js with materialize:

rmidia.herokuapp.com

Solution 6:[6]

Initiate Materialize Components Using Vanilla Javascript Instead of using jquery and it will works.

Solution 7:[7]

Bit late. But you can use a CDN. The Getting Started now has instructions for it. https://materializecss.com/getting-started.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marat
Solution 2 adriennetacke
Solution 3 mairan
Solution 4 leopragi
Solution 5 Hardik Shah
Solution 6 Abhishek Singh
Solution 7 Monarch Wadia

Related Questions