Develop Reference

Chicken-and-egg problem with node-gyp: Pointing to a header file in a dependency

This is my first attempt at building an npm package that includes C++ code. I thought that I had everything set up properly because, while working in the project folder for the package itself, npm i or node-gyp rebuild was working just fine.
But now that I've published the package, and I'm trying to use that package as a dependency in another project, installation is failing during compilation, when trying to include an important C header file:
CXX(target) Release/obj.target/ar_signal_monitor/ar-signal-monitor-node.o
../ar-signal-monitor-node.cpp:1:10: fatal error: 'napi.h' file not found
#include <napi.h>
^~~~~~~~
1 error generated.
The header file is inside one of the package's dependencies, node-addon-api. My binding.gyp file looks like this:
{
"targets": [
{
"target_name": "ar_signal_monitor",
"cflags!": ["-fno-exceptions"],
"cflags_cc!": ["-fno-exceptions"],
"cflags": ["-Wall", "-std=c++11", "-pthread"],
"cflags_cc": ["-Wall", "-pthread"],
"sources": [
"ar-signal-monitor-node.cpp",
"ar-signal-monitor-node.h",
"ar-signal-monitor.cpp",
"ar-signal-monitor.h"
],
"include_dirs": [
"<!(node -e \"require('node-addon-api').include\")",
"node_modules/node-addon-api",
"/usr/include/node",
"/usr/local/include/node"
],
"libraries": [
"-lwiringPi"
],
"defines": ["NAPI_CPP_EXCEPTIONS"],
'conditions': [
["OS==\"mac\"", {
"defines": ["USE_FAKE_WIRING_PI"],
"libraries!": ["-lwiringPi"],
"xcode_settings": {"GCC_ENABLE_CPP_EXCEPTIONS": "YES"}
}],
["OS==\"win\"", {
"defines": ["USE_FAKE_WIRING_PI"],
"libraries!": ["-lwiringPi"]
}],
],
}
]
}
I'm trying to use "include_dirs" to tell the compiler where to find the <napi.h> header file. I think that perhaps the problem I have is that the installation process wants to compile my C++ code first, and only after that's successfully done then load the dependent npm packages where the header file I need for successful compilation lives.
Is there a way around this problem? Is it a different problem than I think it is? I tried first including node-addon-api in the client project, but that didn't help. (And even if it had worked, that wouldn't be any better than a temporary word-around.)
Full code for the project can be found here: https://github.com/kshetline/rpi-acu-rite-temperature

I'd been thinking I'd needed to do something different in my binding.gyp file, but the solution (or, at least, a solution) turned out to be something I could do in my package.json:
"scripts": {
"preinstall": "npm i node-addon-api",

Loading a local ParcelJS plugin

I want to create a plugin so that I can raw-load a certain type of file with parcel. Parcel docs states that:
Publish this package on npm using parcel-plugin- or #your-scope/parcel-plugin- prefixes, and it will be automatically detected and loaded as described below.
...
Any dependencies listed in package.json with these prefixes will automatically be loaded during initialization.
Since this is a one-time thing, I don't want to publish the code on npm as a plugin. How do I load my project-local plugin with parcel?
Thanks in advance.

Since I could not find a way to do this in a parcel way, I did this in an npm way:
I created a folder named local_modules (this can be anything you want.) Then created parcel-plugin-x inside local_modules. Inside that, I created my plugin as usual. I also created a package.json specifying the entry point main. You can specify the dependencies required for the module just like if this is a separate project (THIS IS!).
{
"name": "parcel-plugin-x",
"version": "0.1.0",
"description": "Parcel plugin x",
"main": "index.js",
"devDependencies": {
},
"dependencies": {
}
}
Directory structure:
project-folder---local_modules---parcel-plugin-x
|---package.json |
|---index.js
|---package.json
Then I ran npm i --save-dev .local_modules/parcel-plugin-x inside the project-folder. It adds the line "parcel-plugin-x": "./local_modules/parcel-plugin-x", to the root package.json. This is the standard way of loading local modules in npm. And everytime you make changes to the plugin, you have to run npm upgrade. You should also increase the version of your plugin, too. This copies the plugin to node_modules and install dependancies.
According to the parceljs docs:
Any dependencies listed in package.json with these prefixes will
automatically be loaded during initialization.
now it works! :)

I did something similar, but with npm link.
In plugin folder (parcel-plugin-x) just run: npm link.
In the project folder using the plugin:
Link to parcel-plugin-x: npm link parcel-plugin-x
In package.json file, manually add the dependency to parcel-plugin-x
package.json
"devDependencies": {
"parcel-plugin-x": "^0"
}
Each time you make changes to the plugin, you don't have to run npm upgrade, but you might have to remove .cache folder created by parcel, because parcel will skip processing cached assets.

I think you can do this with the workspaces option in package.json: https://docs.npmjs.com/cli/v7/using-npm/workspaces
This library seems to be implementing it: https://github.com/astegmaier/stackoverflow-parcel-namer

Can´t add Bootstrap 4 in Angular 6

I have the problem when I try to add the latest bootstrap version with
npm install bootstrap
After that, I got an error message when I tried to run it.
ng serve --open
I Add Bootstrap in angular.json
like this
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
And the error message is
ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'
Why did I get the error message?

Delete "../node_modules/bootstrap/dist/css/bootstrap.min.css", in the Angular.json.
Try add this #import "~bootstrap/dist/css/bootstrap.css"; to your style.css file.
Ref: Styling Angular CLI v6 apps with Bootstrap

If the project has a test runner like Karma the Angular.json file has two styles property:
1- projects -> projectName -> architect -> build -> options
2- projects -> projectName -> architect -> test -> options
Maybe you just change styles in the test section and the build section has old styles.

In the Angular 6 you can add bootstrap to two files:
Inside the angular.json:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Inside the angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Inside the styles.css:
/* You can add global styles to this file, and also import other style files */
#import "~bootstrap/dist/css/bootstrap.css";
Note: If you use the first or second way, it's needed to cancel the running application, that means, if ng serve is active you must exit the app with Ctrl + C, but in the third way, it's not needed to cancel the application.

In the new version of angular, use node_modules/bootstrap/dist/css/bootstrap.min.css instead of ../node_modules/bootstrap/dist/css/bootstrap.min.css
So in angular.json file style attribute will look like
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
NOTE: if ng serve is already running then you may need to stop and run it again after doing the above changes. Happy coding :)

In angular, We have to add the direction of the bootstrap we installed.
Which means steps are as follows to use bootstrap in angular.
1. npm install bootstrap
Then we have to add the path in angular.json as follows
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css"
]

Issue adding third-party (external ) js lib in angular5

I am working on to add jsplumb community js library version with the angular 5 application (Angular CLI: 1.6.1).
With the first build without any configuration to tsconfig.json I get the following error.
ERROR in src/app/jsplumb/jsplumb.component.ts(4,25): error TS6143: Module '../../../node_modules/jsplumb/dist/js/jsplumb.js' was resolved to 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js', but '--allowJs' is not set.
With "allowJs":true in the tsconfig.json get the following error
ERROR in error TS5055: Cannot write file 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js' because it would overwrite input file.
Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
As per tsconfig FAQ
Why am I getting the error TS5055: Cannot write file 'xxx.js' because it would overwrite input file.
with an outDir ("outDir": "./dist/out-tsc") this issue should be resolved. This is already set in my tsconfig.
If we add noEmit to true it simply builds the application, not including any js we get a blank white screen.
Let me know if anyone has tried to include external js with new angular cli and face the same kind of error and what is the solution for the same.
Without any additional option added to tsconfig.json if I try to modify any ts file the application will compile with success and I am able to work. But this does not help while running ng build, to create a deployable binary.
Update Workaround: until the fix in CLI is available. For development (ng serve) remove allowJs from tsconfig.json, when ever you get an error with adding allowJs simply modify a ts file to recompile the applicaiton, this time will compile with success. For production or distribution add back the allowJs to tsconfig.json run the application run with ng build --prod --watch=auto you should see the error about overriding the JS file in node_module, simple modify a ts file it should rebuild as --watch=auto is there in command but this time with sucess.

If you're trying to import a library to Angular 2+, you should do it inside angular-cli.json.
There you have a scripts key where you should configure the desired imports. They are generally like:
{
...
"scripts": [
"../node_modules/MODULE/file.js"
],
...
}
Also you can import the library (not recommended) inside your main index.html, using <script src="/path_relative_to_root/file.js">
https://github.com/angular/angular-cli/wiki/angular-cli
https://github.com/angular/angular-cli/wiki/stories-global-scripts
Angular Cli Webpack, How to add or bundle external js files?

have you tried upgrading it to angular 6? maybe they fixed this in the new version.
ng update #angular/cli

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.

You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.