0

Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder. E.g. 

var qr = require('qr-image');

I am trying to do something similar in grunt but i am unsuccessful with that.

I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project. 

"devDependencies": {
    .
    .
    .

    "qr-image": "^2.0.0"
},

Now whenever I use require I get the following error on console and my code breaks.

ReferenceError: require is not defined

Please suggest as how to use the npm module in Grunt based project, Thanks.

Div Sehgal
  • 73
  • 1
  • 1
  • 12
  • 2
    what do you mean by "get the following error on console". Are you running this in a terminal (using linux or mac osx) or in a browser? If it's in a terminal, what command are you typing to run it? – MrColes Sep 16 '14 at 13:27
  • FYI most of the results on `ReferenceError: require is not defined` in Google are related to people trying to use `require` in browser scripts which, unless you're using browserify, is not going to work. – Andy Sep 16 '14 at 13:47
  • I am writing the code in my .js files. (tried both controller and service javascript). While doing Inspect element in chrome I am able to see this error. I am confused where to use require? In node based project i used to write the require statement in the server.js file ( where i used to define the server and its port on which it is running ) – Div Sehgal Sep 16 '14 at 14:05

1 Answers1

0

The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.

In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:

<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>

Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.

Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).

A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.

Community
  • 1
  • 1
MrColes
  • 2,453
  • 1
  • 28
  • 38
  • Thanks for the detailed answer. It helped a lot. After reading your answer many times I came to a conclusion to implement the creation of qr codes at the server side. This is due to the fact that I am using Firebase to save the qr image generated and later display that image whenever the user visits that page again. Do you think is there any better approach than this? One way is to only save the qr image's text in the firebase and compute for the qr code every time a user visits that page. – Div Sehgal Sep 16 '14 at 14:54
  • Server-side sounds good. Your approach sounds fine, but honestly go with what will work reasonably enough for now and iterate on it after that. Long-term you might want something that lazily generates the image, e.g., when a request comes in to load one of these images, only if it doesn't exist yet, then it generates it, stores it, and returns it. I've done things like this in the past using mod_rewrite to let the static webserver serve images unless they don't exist yet. – MrColes Sep 19 '14 at 15:33