Requiring module with karma not working - javascript

I create a dev Javascript environment using TDD by using node, jake, karma, chai and browserify. Everything works fine, tests run green. Now I want to use Raphael to draw SVGs. I installed raphael npm install raphael to my local node environment (not globally). Requiring
var raphael = require("node-raphael")
Whenever I require it in my app.js file, it throws an error:
Uncaught Error: Could not find module 'raphael' from '../Project/src/javascript/app.js'
Just for testing I required it in my jakefile which is in my Project directory. There, requiring works fine. But using the Raphael functions also does not work.
node modules are also placed in the Project dir. "Project/node-modules/raphael"

I haven't used raphael, but from looking at npmjs.com there are two different modules: raphael and node-raphael. You have installed raphael, but you are requiring node-raphael. So, you either need to install node-raphael:
npm install node-raphael
or require raphael in your code:
var raphael = require("raphael")
See https://www.npmjs.com/package/raphael and https://www.npmjs.com/package/node-raphael.

Related

r.js with old build system (bower) error with bootstrap

I am trying to move away from bower (since Reactjs is discontinued for it, maybe also other components)
Used bower-away to make package.json
Seem to went further, however bootstrap.js while ”traced” or how it is called by r.js produces error
Command run
r.js -o $(BUILD_TMP_DIR)/static/js/build.js
r.js error: line 778 unexpected token
However this is just normal bootstrap.js file
npm install bootstrap --save
I looked also at the bootstrap.js and it looks like a normal JS file
Is there a way to fix it? Maybe not even use r.js to produce build.js?
what are my options?
Update 1
I am new to Frontend, this also seems like older/legacy code.
Yes, project I think uses requirejs
https://github.com/marcinguy/betterscan-ce/blob/master/quantifiedcode/frontend/src/js/config.js
The code is open source I try to fix:
https://github.com/marcinguy/betterscan-ce/tree/master/quantifiedcode/frontend
You need to just run make to build it
https://github.com/marcinguy/betterscan-ce/blob/master/quantifiedcode/frontend/Makefile
I modified it with bower-away to use only package.json. Changed Makefile and src/js/config.js to work with node_modules instead of bower_components
r.js worked for reactjs and prism, but errors on bootstrap
installed
npm install reactjs --save
npm install prism --save
etc
Here is bower.json
https://github.com/marcinguy/betterscan-ce/blob/master/quantifiedcode/frontend/bower.json
Maybe I should try different npm install bootstrap? but which?
I have node 14

How to make webpack ignore library dependencies?

I have a node library that I'm developing called 'MyLib' that is compiled to a dist/my-lib.js file using the webpack command.
Now, I have another project that makes use of that library. I "included" it by doing:
npm install --save ../../my-library
And in my project's index.js I can do:
import { ExportedClass } from 'my-library'
...
const ec = new ExportedClass()
So far so good. Now, I make some changes to the lib and include some feature that uses a certain babel config, then I build the library and go back to the main project, but now the main project fails to compile and complains about a missing/disabled babel-loader config? Why?
Error in /.../my-library/src/MyClass.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /.../my-library/src/MyClass.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:14)
Isn't the purpose of building the other library is to be able to just import and use it? Why do I have to replicate its build env and dependencies in my project?
For context: Both my project and library are built using webpack and in development mode with target: node.

Debugging an NPM module

Currently, I've created an NPM module and published it to NPM and included it in a separate project for use. I've performed NPM link so I don't have to publish every time I make a change and those updates are being reflected appropriately. However, I can't seem to debug the module itself. I've tried placing a debugger in the modules code within the node_modules directory and I've tried to place one in the actual module project, but to no avail. Is there a best practice for debugging an NPM module? If it helps, I'm using Visual Studio Code.

Browserify on PhantomJS script with `require('webpage')`

How can I run browserify on a JavaScript module that requires the PhantomJS webpage module?
Since the webpage module is provided by PhantomJS, browserify can't find it and I get Error: module "webpage" not found. The --ignore and --exclude options both produce the error. The --ignore-missing option eliminates the import altogether.
Does browserify have a way to indicate that certain uses of require should not be included as a bundle dependency?
Background
I'm trying to write a PhantomJS script in ES6. I can transpile a single script into ES5 code that runs in PhantomJS, and I'm trying to use Browserify to transpile the entire dependency tree. Unfortunately, there are some dependencies it shouldn't pull in—those provided by PhantomJS—and compilation breaks because it can find those modules.
Perhaps I should be using a different tool than Browserify?
// browserify will resolve someNodeModule and include it in the bundle
var mymodule = require('someNodeModule');
var _require = require;
// browserify will ignore this, so 'webpage' is resolved at runtime inside phantomjs
var webpage = _require('webpage');

Npm.require can't find node module

I have been trying to use the Npm.require to get the ldapjs module and use it for client authentication, however I am getting the following message.
var ldap = Npm.require('ldapjs');
Error: Cannot find module 'ldapjs'
Isn't the require supposed to download the package from the npm?
Currently the best way to use NPM packages in Meteor is this npm smart package. The instructions on how to use it are pretty clear there. Basically, you do three things:
1) Install npm:
mrt add npm
2) Create packages.json file with list of required packages:
{
"ldapjs": "0.6.3"
}
3) Use the package via Meteor.require:
var ldapjs = Meteor.require('ldapjs');
Nope, it is not. Meteor will only download a node module as long as it is declared within a smart package, with Npm.depends({...}) directive. If your code is not a part of some smart package, then you'll need to install the node module manually.
You need two things to use npm modules in Meteor packages:
Npm.depends - specify the modules you want to use, with versions. Meteor's build system will download the package and manage its dependencies
Npm.require - pull in a module, making it available in the current scope
Note that you need to write a package to use an npm module. You'll probably want to read through the Meteor docs on packages.
For an example, check out the logging package in Meteor. Its package.js specifies a depency on the npm module cli-color, and its logging.js file requires and uses the module.
node modules in the main application
What if you want to use npm from the main application? And what if you don't want to install node modules manually (a maintenance headache)?
This is possible with a workaround. Create a shim smart package to provide the node modules for the main application. Export the modules to the main application.
The exact steps
1. Create a directory npm-shim outside your Meteor application. We will use it in step 3.
2. Add these two files to it:
File package.js
// npm dependencies are only available for packages. If you have npm
// dependencies for the main application, you need this workaround:
// Create a shim package to provide the npm dependencies to the main app.
Package.describe({
summary: "Meteor main application npm dependencies"
});
Npm.depends({
colors: '0.6.2',
// Add more modules as needed.
});
Package.on_use(function(api) {
api.export("NpmShim"); // Omit this for versions before 0.6.5
api.add_files("npm.js", "server");
});
File npm.js
NpmShim = {};
NpmShim.colors = Npm.require('colors');
// Add more modules as needed.
3. Edit smart.json and add this line:
"npm-shim": { "path": <path to the directory created in step 1> },
4. Execute mrt update then meteor add npm-shim.
The result of this workaround
Node modules can be used from the Meteor main application without the need to manually install them. Use NpmShim.colors instead of Npm.require('colors').
If you need more modules, you have to add them to package.js and npm.js (see comment // Add more modules as needed).

Categories

Resources