Develop Reference

How to include "require" in PhpStorm for my JavaScript code?

I am using the line canvg('canvas', svg); in my code. This means I need canvg.js.
I have included canvg.js in my html header. However it gives me an error that "require is undefined".
For those that don't know the first two lines of canvg.js are:
var RGBColor = require('rgbcolor'),
StackBlur = require('stackblur-canvas');
This first showed up in my console as an error. This wasn't really a problem as the code still worked.
Now that I am on to testing though the errors cause the tests not to run. This is an issue.
error loading file: /test/tests/Dependencies/canvg.js:4: Uncaught ReferenceError: require is not defined
I went to https://requirejs.org/docs/release/2.3.6/comments/require.js and copied and pasted the code to a file called require236.js and saved it in my project.
I then went to my main.html an added my <script src="require236.js"></script>
right before canvg is loaded.
I got these errors in the console:
Uncaught Error: Mismatched anonymous define() module: function(){return f}
https://requirejs.org/docs/errors.html#mismatch
at makeError (require236.js:168)
at intakeDefines (require236.js:1254)
at require236.js:1452
require236.js:143 Uncaught Error: Module name "rgbcolor" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
at makeError (require236.js:168)
at Object.localRequire [as require] (require236.js:1436)
at requirejs (require236.js:1797)
at canvg.js:4
And my tests do not run with that file as a dependency.
https://requirejs.org/docs/errors.html#mismatch says
To avoid the error:
Be sure to load all scripts that call define() via the RequireJS API.
Do not manually code script tags in HTML to load scripts that have
define() calls in them.
If you manually code an HTML script tag, be sure it only includes named
modules, and that an anonymous module that will have the same name as one
of the modules in that file is not loaded.
If the problem is the use of loader plugins or anonymous
modules but the RequireJS optimizer is not used for file bundling, use
the RequireJS optimizer.
If the problem is the var define lint approach, use /*global define */ (no
space before "global") comment style instead.
But I honestly do not understand how they expect to include it and where. Please use simple English words (or just show a code sample) if you understand it enough to explain it.
I am running from PhpStorm. I am testing with jsTestDriver. I must be declaring it wrong somehow but I have no clue how and why require.js is giving me such issues.

Simple answer is that the file you have included is not supposed to be run in browser, as it uses the CommonJS syntax that can only be used in server-side code run by node.js.
You have to make sure to include the browser version of your library that doesn't have any require() calls, like:
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
see https://github.com/canvg/canvg#usage-on-the-browser

How to use Node.js packages within a client-side html document using browserify

I'm unable to use a node.js module on my website with broweserify. The example only shows how to run a javascript file that is separate from the .html file, not how to use the node.js module within the .html file. Seems like a trivial problem, but I'm unable to make it work.
Here's what I've done:
Initialized node.js & installed a package, npm i webtorrent-health as an example
Created require_stuff.js which consists of a single line: var WebtorrentHealth = require('webtorrent-health')
Run browserify: browserify require_stuff.js > bundle.js
Include package in my html document, e.g. <script src='bundle.js'></script>
Use the package somewhere in my document, e.g. like this: <script>webtorrentHealth(magnet).then(foobazbar())</script>
Despite bundle.js executing and seemingly defining webtorrentHealth, the script within the .html document fails with WebtorrentHealth is not defined. What am I doing wrong? How do I make it work? Thank you!

You're very close to what you want to achieve. In fact, your code bundle.js is inaccessible from outside (in your case the browser) due to browserify, but you can expose your module by writing at the end of your file require_stuff.js:
window.WebtorrentHealth = WebtorrentHealth;
Now you can use WebtorrentHealth in your document.

require is not defined at npm.js:2

Forgive me if this is something simple as my research has come up empty in regards to this specific issue. I am using Bootstrap the most recent release. I have noticed that there is a file that is new from previous releases called npm.js. I am hosting all the Bootstrap files locally on my hosted web server. I call the file like all the others in the head to the full path to the file. In the console I have this error.
npm.js:2 Uncaught ReferenceError: require is not defined
at npm.js:2
Which is referring to this line.
require('../../js/transition.js')`
Which is from this npm.js file that is in the newest Bootstrap
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
I am unfamilar with this so I am not sure why I am getting this error but, how can I surpress this error and fix this issue? Do I even need this file? From what I understand if I am using modals or tooltips etc I need this. Is this correct?

You will need to download/config the missing libraries or requires. I am not sure which libraries you are using.
You can add the missing libraries to your package.json. Then call for npm install.

cannot find module breeze with browserify

I am attempting to load breeze using browserify. I used npm to install the breeze-client library. If I run browserify without including breeze everything runs fine, but when I include breeze I get the following error:
Error: Cannot find module 'breeze' from 'C:\...\node_modules\breeze-client'
I've tried doing the require every way I can think of
require("breeze-client");
require("breeze-client/breeze.debug");
require("breeze-client/breeze.debug.js");
require("../node_modules/breeze-client");
// etc...
Only thing I can think of now is that there is an issue with the module that's causing a problem with browserify.
Does anyone know of a change that can be made to the module to get this to work or is there some setting in browserify that I need to use?
Complete error message when trying to run browserify directly on the breeze module:
C:\...>browserify "node_modules/breeze-client" -o "scripts/dist/breeze.js"
Error: Cannot find module 'breeze' from 'C:\...\node_modules\breeze-client'
at C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:46:17
at process (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:188:17)
at load (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
at onex (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
at C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)

need to make sure all references to require("breeze") were updated to require("breeze-client") inside the breeze.debug.js file as well as any adapters you might include from the build/adapters directory.
There is a pull-request in to fix this so hopefully it won't be a problem in future versions.

test not running on karma/jasmine/require.js 'There is no timestamp for *lib*!' error

I change the code, extend some functionality and add new unittest for that. Now, when I run my unit tests with karma (test framework - jasmine), it throw me an error
'There is no timestamp for /libs/angular-bootstrap/ui-bootstrap-tpls.js!'
Uncaught Error: Script error for: angular-bootstrap
http://requirejs.org/docs/errors.html#scripterror
at http://localhost:9876/base/node_modules/karma-requirejs/lib/require.js?1379984163000:138
What I'm doing wrong?

It was my mistake completely. when using karma-requirejs you have main-test.js file where configure how to require.js get the files. I add reference to angular-bootstrap with mistake, that's why require.js couldn't find this file and throwing this mistake. So in my case this error means wrong file name provided.

It can be because it cannot access your source file. You should configure karma to serve scripts where require will look for them.
For example have the config in the karma conf
files:[{pattern: 'node_modules/**/*.js', included:false}]

The question is old, the OP already solved his problem by now, but I'll add my two cents:
From the error message (end of the first error line) we can conclude that you were including a paths (or deps) file in main-test.js with the .js extension.
In RequireJS, you need to call the file names without the extension, so your paths (or deps) would look more or less like this:
paths: {
'ui-bootstrap': 'libs/angular-bootstrap/ui-bootstrap-tpls' // <- without the extension
}