Develop Reference

Webpack config file (webpack.config.js) not working as expected

I have an Angular project on Linux that generally works.
Angular CLI: 13.3.9
Node: 16.14.2
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1202.18
#angular-devkit/build-angular 13.3.9
#angular-devkit/core 12.2.18
#angular-devkit/schematics 13.3.9
#angular/cli 13.3.9
#schematics/angular 13.3.9
rxjs 7.5.6
typescript 4.6.4
But when trying to ng serve the project, I am sometimes getting an endless stream of error messages such as
Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reached, watch '/home/me/my_project/node_modules/libp2p-utils/dist'
so I have to stop the process and then ng serve fails.
I wanted to solve this problem so I found this answer:
https://stackoverflow.com/a/72423671
I followed the instructions and then based on the following documentation
https://webpack.js.org/configuration/watch/#watch
I went ahead and had the following content in the new webpack.config.js file that I created:
module.exports = {
//...
watch: false,
};
Now, I think that that was supposed to make Webpack not watch any file.
But when I do ng serve, again I am getting what seems to be the same error messages as before. It seems like Webpack keeps watching those node_modules files.
I think the ng serve does see the webpack.config.js file, because when I change the setting to watch: blah,, I am getting the error message
An unhandled exception occurred: blah is not defined
I have also tried the following:
module.exports = {
//...
watchOptions: {
ignored: '**/node_modules',
},
};
But again, the same error messages.
Why doesn't the Webpack config work as expected?

Getting "Unknown Option" error running JHipster generated frontend with "npm start"

Whenever I run my default JHipster project (I only changed some code on the backend and made a few styling changes), I get the following error:
[webpack-cli] Error: Unknown option '--inline'
[webpack-cli] Run 'webpack --help' to see available commands and options
Already ran sudo npm i -S webpack#latest to ensure I'm using a new webpack version.
If I remove --inline from the commands, I get a different error:
1% setup initialize[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
options has an unknown property 'watchOptions'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
Little bit confused here as I haven't setup the project and also not touched webpack in a while - appreciate any help and thanks in advance!

It was simply a version dependency mismatch. For some reason, the Webpack Config was not defined for the same version as the as the one installed (v4 vs v5 respectively) - I simply assumed that the package json settings would prevent this from happening.
I went through each error using the webpack docs and upgraded it according to the migration instructions.

Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

I work with Augmented UI in my Gatsby project, every thing works great in dev mode.
When I go with build command, I got this log error:
info bootstrap finished - 4.630 s
⠀
failed Building production JavaScript and CSS bundles - 9.761s
ERROR #98123 WEBPACK
Generating JavaScript bundles failed
Parse error on line 1:
...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
not finished run queries - 9.857s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project#1.0.0 build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project#1.0.0 build script.
After some researches, it seems that PostCSS is unable to work along with Augmented UI (on calc functions).
I'm unable to find a way to disable PostCSS on this.
My dependencies versions are:
"gatsby": "^2.18.5",
"gatsby-plugin-postcss": "^2.1.16"
My current postcss.config.js looks like that:
module.exports = () => ({
plugins: [require('tailwindcss')],
})
Thanks for any help on this subject.

#Zooly, the problem is related with the use of calc function in the CSS preprocessor or minifier. From the Augmented UI's documentation:
Compatibility with Create React App (And in my situation, Vue)
Create React App depends on PostCSS and cssnano. Both of these libraries have parsing bugs that block augmented-ui so you'll need to copy augmented-ui.min.css into the public folder and manually include it in the index.html file to avoid them until they're fixed.
https://augmented-ui.com/docs/#install
As you can see at this support answer on GitHub https://github.com/propjockey/augmented-ui/issues/3#issuecomment-579671714, you can add this key to your package.json config file:
"cssnano": {
"preset": [
"default",
{
"calc": false
}
]
},
I use this workaround and it works fine to build my Vue project. Hope it works for yours too.

I ran into the same problem (also with Argument UI), and did not fix it. But here is a quick work around:
<Helmet>
<link rel='stylesheet' href='https://unpkg.com/augmented-ui/augmented.css' />
</Helmet>
And just a heads up: I had to delete my public and .cache folder to get the build to include the link to the CDN.

Angular (4.1.3) ng-select2 Error

I installed ng-select2 package. And I'm getting this error and code is not able to complie after 'ng serve'.
node version is 8.10.0
npm version 6.0.0
List item
OS Windows 7
ERROR in d:/PATH-TO-PROJECT-FOLDER/node_modules/#types/select2/index.d.ts (233,49): 'JQuery' only refers to a type, but is being used as a namespace here.
ERROR in D:/PATH-TO-PROJECT-FOLDER/node_modules/ng-select2/ng-select2/ng-select2.component.ts (188,18): Cannot find name 'Select2Options'.
ERROR in /src/app/pages/dashboard/dashboard.component.ts (91,19): Cannot find name 'Select2Options'.
// Dashboard component ts(91, 19) error + I've also added import to it:
public options: Select2Options;
Solutions I tried are:
As per documentation, added import and also imported in #NgModule to app.module.ts
I've jquery#3.2.1 and #types/jquery#2.0.41 installed as well.
npm cache verify, then npm cache clean --force and updated npm
deleted package-lock.json and then ran npm install
But this doesn't seem to work.

As stated in the github issue:
The interface Select2Options is removed/renamed to Options in the latest version 4.0.45
To resolve this issue, I simply downgrade the package to 4.0.44 by running
npm install # types/select2#4.0.44 --save and this worked for me.
https://github.com/NejcZdovc/ng2-select2/issues/124

I had a similar problem. I installed according to the selected2 documentation. Unfortunately, an error appeared
Error: src/app/app.module.ts:6:33 - error TS2307: Cannot find module './select2' or its corresponding type declarations.
6 import { NgSelect2Module } from './select2';
Although it was in the Initial Chunk Files
Initial Chunk Files | Names
select2.js | select2
I tried your solution but the compiler said it is not a module.
Error: src/app/app.module.ts:6:33 - error TS2306: File 'C:/Users/admin/Documents/WorkspaceAngular/medical-v0.9/node_modules/#types/select2/index.d.ts' is not a module.
6 import { NgSelect2Module } from '#types/select2',
So I installed componenet
npm i ng-select2-component --save
https://www.npmjs.com/package/ng-select2-component
It worked ;-)

How to properly link to nodejs curve25519 library

I have cloned git repository https://github.com/thejh/node-curve25519 and next used npm link inside it. I am using this library in suggested way: var curve = require('curve25519');. But I am getting this error on the line curve.makeSecretKey() in this fragment:
temp.secret = crypto.randomBytes(32);
curve.makeSecretKey(temp.secret);
This is error message:
/Users/username/Workspaces/nodejs/myproject/server.js:59
curve.makeSecretKey(ctx.private);
^
TypeError: Object #<Object> has no method 'makeSecretKey'
at handlers.(anonymous function) (/Users/username/Workspaces/nodejs/myprojet/server.js:59:8)
at Socket.<anonymous> (/Users/username/Workspaces/nodejs/myproject/server.js:198:3)
at Socket.EventEmitter.emit (events.js:98:17)
at UDP.onMessage (dgram.js:440:8)
What am I doing wrong? This library should contains such method. As you can see: https://github.com/thejh/node-curve25519/blob/master/index.js

You need to also link the library from your project directory.
An example from the docs:
cd ~/projects/node-redis # go into the package directory
npm link # creates global link
cd ~/projects/node-bloggy # go into some other package directory.
npm link redis # link-install the package
In your case, the first package directory is the curve25519 git repo and if I understood your question correctly, the line you need to run in your project directory is npm link curve25519