Adding supertest to Aurelia causes error when building vendor bundle - node.js

I have a current project using aurelia.
I add the supertest library using npm.
npm install supertest --save-dev
Now add package to aurelia.json file
{
"name": "supertest",
"path": "../node_modules/supertest"
}
Now run aurelia build
au run
produces following error:
Tracing supertest...
error /Users/xxxxxxx/node_modules/supertest.js
Writing app-bundle.js...
I have tried everything I can think of to fix this. Any help would be appreciated.

I recommend you to use the aurelia-skeleton-navigation setup instead which uses Gulp and JSPM -> https://github.com/aurelia/skeleton-navigation. This will provide you more on control on your project.
Aurelia CLI is still on alpha, quoting from https://github.com/aurelia/cli:
Note: The CLI is currently in Alpha and as such may not be suitable for use on all projects yet. In particular, projects that need to make use of extensive 3rd party libraries or Aurelia plugins may not yet work or may require extensive custom configuration or workarounds. We are in the process of addressing these issues.
Emphasis on extensive custom configuration or workarounds lol. I myself tried the CLI initially but ended up switching to Gulp and JSPM setup instead because of the tedious importing of external libraries.

Related

JetBrains WebStorm npm modules autocompletion not working

I am new to Node.js development and I have installed WebStorm from JetBrains to use it as my JavaScript IDE.
So I am following a tutorial in Udemy and I have come to notice the following problem.
I installed some modules with npm from WebStorm Console and although my JS script is working as intended, WebStorm autocompletion for the npm modules is not working.
Coding assistance for Node.js in my settings is marked! What do I do wrong?
The problems occur because of the weird way properties are defined.
For example, in chalk package they are generated dynamically using Object.defineProperty(this, styleName, {value: builder});, where the styleName is a color name you use in your code. There is no way to resolve them when analyzing file statically.
Normally installing Typescript stubs can be used as a workaround. But this doesn't work for validator due to WEB-43528.
chulk typings are included in package distribution, but not resolved because the required fields in package.json are missing. As a workaround, open node_modules/chalk/package.json and add "types": "index.d.ts", to it:
this should help:

how to deal with bloated lodash npm package size?

I have been absent from nodejs development for a few years, and to my surprise when I did
$ npm install lodash
the size of my node_modules grew by 4.8MiB
how come a library that judging by its source line count should be around 260KiB takes so much space?
I am deploying my code as an AWS Lambda, and the ability to edit and debug in the console is lost due the increased size of my distribution file (partly because of this).
What's the 2019 way to deal with this?
You node_modules size is irrelevant.
If you build you application the size is much much smaller:
minified 69.2kb
minified + gzipped 24.3kB
see here
If you're using Webpack, ESBuild, or a similar bundler with tree-shaking capabilities, you can import lodash functions discretely.
import foo from 'lodash/foo';
Support for this syntax was added in Lodash v4.
Note the syntax should be 'lodash/foo'. Contrarily, import { foo } from 'lodash' will not be tree-shaken.
Like Norbert said, your node_modules size is irrelevant. You'll want to look at the size of your bundle after building your application. In the case of Webpack, you can use Webpack Bundle Analyzer to gain additional insights into your bundle's distribution. For Vite and other toolchains that use Rollup, consider rollup-plugin-visualizer.
Here's a few more tips:
As of lodash v4, tree-shaking works without additional configuration in Webpack >= v4 and ESBuild. If you use lodash-es and you have other dependencies that require lodash, both will end up in your bundle.
If you're using Babel, and you don't want to refactor your entire codebase to use the aforementioned lodash/foo syntax, consider using babel-plugin-lodash. This plugin rewrites lodash import statements to use the tree-shaking syntax for you.
If you're using Babel's preset-env plugin, set the modules option to false. Babel rewrites modules to use CommonJS by default, which won’t tree-shake.
If you're only using a single Lodash function, you can install it as a standalone module in lieu of installing the entire lodash package. e.g. npm install --save lodash.functionName
lodash-es introduces a few exceptions to this strategy. Refer to this answer for more insight into this.

Node package dependencies on IBM Cloud Foundry - require/module is not defined (Package not loading)

I am working on an application via the toolchain tool on IBM Cloud and editing the code via the Eclipse Orion IDE. As I am not accessing this through my local cli, my understanding is that in order to so call npm install {package}, I would just need to include the package in the package.json file under dependencies and require it in my app. However, when I load the application, I get the require is not defined indicating that the package has not been installed. Moreover, the require() is being used in the app.js file with the application being launched but not from files in my public directory.
After playing around further, it seems it might have to do with the way the directory tree is being traced as the error is only thrown in subdirectories. For example, require('express') works in app.js which is in the main directory ./ but fails when it is called in test.js in ./subdirectory/test.js. I feel like I'm missing something painfully simple like configuration of endpoint or something.
I've been searching around but I can't seem to find how to get the packages loaded, preferably without using the cli. Appreciate any pointers. Thanks!
Update: After playing around further, I am also getting module is not defined error when trying to require from another file in the same directory. For example module.exports = 'str' returns this error. While trying to require('./file') returns the require is not defined. It might have to do with how node is wrapping the functions?
Update 2: Tried "start": "npm install && node app.js" in package.json but no luck. Adding a build stage which calls npm install before deployment also does not work
Update 3: After adding npm install build stage, I am able to see that the dependencies have been successfully built via the logs. However, the require is not defined error still persists.
Update 4: Trying npm install from my CLI doesn't work as well even though all packages and dependencies are present
Update 5: Running cf restage or configuring cache via cacheDirectories does not work as well
Opened a related question regarding deployment here
Found out my confusion was caused due to me not realizing that require() cannot be used on the client side unless via tools such as Browserify.

Noflo example : Running inside browser

We are trying to get a simple noflo example running inside a browser as described the noflojs.org/documentation/fbp/ [Language for Flow-Based Programming]
We tried to refer to some examples available on GitHub
github.com/noflo/noflo-browser-app
github.com/noflo/noflo-websocket
github.com/bergie/flowcopter
We tried npm install; grunt build. We get the below error and are not able to proceed beyond this:
Running "noflo_browser:build" (noflo_browser) task install
noflo/noflo#master Warning: dns lookup failed Use --force to
continue.
Any idea what are we missing ?
At the time of the question the build setup for the projects mentioned was still based on Component.js which had become unmaintained.
Nowadays we're using NPM for installing dependencies and WebPack for browser builds.
Suggested fix would be to fetch the latest versions of these repos, do npm install and build again. This will bring the build up to spec.
If you're using the old build setup in your own projects, this PR is a handy example on what to change to go from Component.js to WebPack.

Using localForage and angular-localForage with Browserify causing errors with require statements

I am attempting to install localForage into a node.js application (with Angular) and Browserify.
Here is a link to the localForage documentation
It appears that using localForage and angular-localForage causes a problem with browserify based around the use of 'require'
If I require the localforage.js file in the src file I get the following error:
Warning: module "promise" not found from "/Users/mgayhart/Sites/epson- receipts/bower_components/localforage/src/localforage.js" Use --force to continue.
If I require the localforage.js file in the dist file, I get the following error:
Warning: module "./drivers/indexeddb" not found from "/Users/mgayhart/Sites/epson- receipts/bower_components/localforage/dist/localforage.js" Use --force to continue.
Anyone know of a workaround to be able to move forward with these libraries?
There is an issue on github with this problem: https://github.com/ocombe/angular-localForage/issues/26
I'll be working on it soon, you can subscribe to the github notifs on this issue to know when it's fixed !
For me installing it through bower and using it with browserify-shim worked. So in package.json:
"browser": {
"localforage":"./src/lib/vendor/localforage/dist/localforage.min.js"
},
"browserify-shim": {
"localforage":"localforage"
}
And to expose it as an angular-service (if you don't want to use angular-localforage):
app.factory "localforage",-> require 'localforage'
I've just been having this issue myself tonight, but I think I found a fix.
Instead of trying to get the bower modules to work with browserify, why not just use npm like its made for?
npm install localforage
and then when you use require you don't have to give it the path
but it still didn't work for me until I copied the folder:
localforage/src/drivers TO localforage/dist/drivers
Then it found all the dependencies and worked like a champ!
Alternatively if you must use bower you could try to use the debowerify tranform w/ gulp:
https://github.com/eugeneware/debowerify

Resources