Develop Reference

vertx module not found when using webpack

When using webpack and libraries that want to use when.js (when), it is possible that the following error is thrown when compiling:
[2] ERROR in ./node_modules/when/lib/env.js 32:14-35
[2] Module not found: Error: Can't resolve 'vertx' in 'path-to-project/node_modules/when/lib'
The issue seems to be isolated to webpack, and is documented on when's github. Running npm install vertx or npm install #vertx/core will not resolve the issue either, since the problem lays in the import of vertx in the when library.

To resolve the issue:
Install #vertx/core (npm i #vertx/core)
Edit the file ./node_modules/when/lib/env.js, and change line 32 from
var vertx = vertxRequire('vertx');
to
var vertx = vertxRequire('#vertx/core');
This will reference the #vertx/core package instead of the vertx package, which does not seem to be able to be found when using webpack and npm. I haven't experienced any issues with just using vertx/core. You might also need to update your gitignore to include the changes to the library if others are also working on your project.

The issue can indeed be solved by adding the #vertex/core package, but instead of editing the ./node_modules/when/lib/env.js file manually as recommended by #Todd Rylaarsdam, I'd use the NormalModuleReplacementPlugin in your Webpack config to replace the old vertx package, like so:
new webpack.NormalModuleReplacementPlugin(
/^vertx/,
'#vertx/core',
)
This way you don't have to make any manual changes to the files of a package you're using.
See https://webpack.js.org/plugins/normal-module-replacement-plugin/ for more info about this plugin.

Ugrade minimist

recently I've been getting this error message on github
Upgrade minimist to version 0.2.1
high severity
Vulnerable versions: < 0.2.1
Patched version: 0.2.1
minimist before 1.2.2 could be tricked into adding or modifying properties of Object.prototype using a "constructor" or "proto" payload.
Im not too sure why I'm getting this error. I never installed the minimist package before. I just created my project from create-react-app.
Is this something I should be worried about? If it is, how do i fix it?
thank you

If you run:
npm ls minimist
you will see which of your installed packages has a dependency on minimist. Most likely they will be dev packages that only run while building your project. Unless you will be deploying these packages, the security warning is not something you should worry about.
Here is more information about this warning for Angular apps. It most likely holds for React apps also: Upgrade minimist to >=1.2.3

You probably have a dependency that is using it. You should check your package-lock.json and see which one it is.

Import date-fns with npm

I am new to web dev and am following a JS tutorial that is only 1 year old but uses outdated instructions for importing the JS library date-fns with a CDN. I love CDNs, unfortunately only an npm package is available now (link to documentation).
I made sure npm was updated then installed date-fns to the desired directory with the following line in terminal:
npm install date-fns --save
There are no more instructions on how to use the package except this example, which I assume goes in the JS file and not the html:
import { formatDistance, subDays } from 'date-fns'
... but using this syntax to try to import the isToday method from the package gives the following warning in my Chrome console:
Uncaught SyntaxError: Cannot use import statement outside a module
This question is asked elsewhere, but there is so much npm-related jargon in those answers I couldn't tell what I was supposed to do. Also, the code was different and older. Does 'module' refer to the npm package?
One would hope a one-year-old tutorial would be new enough to follow. Alas, earwax.

You can get the CDN build of date-fns here: https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js
The import/export won't work in browsers natively, especially if you're trying to work with npm packages. Since you're a beginner, I don't want to confuse you but import/export works in a specific scenario. You can read more about that here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Once you're acquainted with web dev, you can try using a bundler such as Parcel which allows you to use npm packages and combine them into a single JS file that can be used in the web: https://parceljs.org/

How to get Twig.js for the browser

I'm using Twig as my templating system on server side and also want to use it client side (to use the same templates).
I'm also using Bower and tried this command to get Twig.js:
bower install twig.js
But that didn't install all folders as seen here https://github.com/twigjs/twig.js. Then I tried to install other recent branches and commits but still 2 folders were missing at least (bin & src).
After that, I tried cloning the project using Git and it worked because it really got all listed files and folders.
But then when I include twig.js in my HTML file throws this error in the Chrome console log:
twig.js:13 Uncaught ReferenceError: require is not defined
My best guess is that function "require" belongs to Node.js (right?) and there must be some kind of compilation to get Twig.js for the browser (right???).
So, I don't know what is next... How can I get the Twig.js for the browser? (Meanwhile I'm going to get Twig.js from a CDN).
Please help me.

I don't know which version of Twig.js you were using, since the question was posted almost 2 years ago, but probably something 0.9.x or higher. Since that version the maintainers did not commit any JS files compiled for web usage in the root of the project.
So yes, the JS files inside the src/ folder are NodeJS files and you have 'to do something' before you can use them in your browser. The library is using Webpack to build a browser compatible version.
You should run npm install in the root of the GitHub clone to set up the project and then run npm run build in order to build a web version. Check for twig.js in the root after that.
Using a CDN version is also a good option. But because the builds were left out since version 0.9.0 there is no newer version of Twig.js on cdnjs than 0.8.9 while the library is currently on version 1.12.0

Or run npm install twig --save, the compiled files are at:
node_modules/twig/twig.js and
node_modules/twig/twig.min.js

You have to install RequireJS to use require("twig");. Install that first and then run.

Webpack: ChunkRenderError: No template for dependency: TemplateArgumentDependency

I'm attempting to update my Phenomic install to webpack 2 beta 13 (I've heard people suggest the beta is pretty stable now).
I get the follow error when trying to build version using the DedupePlugin, but it seems to work if I remove it. The error is:
phenomic:builder ChunkRenderError: No template for dependency: TemplateArgumentDependency
at Compilation.createChunkAssets
Phenomic includes webpack itself and sets up part of the config. You can run a build using Phenomic and it will also take custom webpack settings from your own generate project. A default project is created for you to modify when you initialise Phenomic.
I've tried changing the version numbers to "webpack": "2.1.0-beta.13", under Phenomic's peer and normal dependencies and rebuilding with it npm linked. I also made a few of the changes needed for updating webpack 1 to version 2.
I've also deleted node_modules in both Phenomic and my project directories, which did not seem to help (and took a long time ;).
I've browsed through this thread which was webpack 1 related and there is some suggestion of dependencies causing multiple copies of webpack. Any ideas are appreciated.
Update:
I made my webpack 2 changes in Phenomic and setup the default project. It seems to build (with some CSS issues), so the problem seems related to the more complex project I am using Phenomic with. Maybe another dependency is bringing in another copy of webpack.

It seems this is npm link related as I installed installed Phenomic from my file system and the issue disappears.
I also noticed there was a global copy of Phenomic, which is also possibly related to npm link.
Another tip I found was npm ls is useful finding what dependencies are in use. You can pipe the output to a file if you want to read it in an editor.