Develop Reference

Webpack Fabric external is resolving to undefined

I'm setting up a project (typescript, webpack) with a couple of js libraries, configured as externals in webpack. They should not be part of the bundle, instead provided by script tags within the html.
But when trying to use them in my class, they resolve to undefined.
Fabric configured as an external in webpack is resolving to undefined
An error occurs when trying to set up the fabric js library as an external within a (typescript + webpack ) project. Fabric should not be bundled in the output file since it will be the responsibility of the consumer to provide (eg. through a browser script tag).
Note: jQuery initially had an issue (as an external) but is now resolved, and works as expected. Fabric on the other hand does not.
fabric has been configured as an external so that it will not be included in the webpack bundle.
Here's how...
Added as an external within the webpack.config.js
...
externals: {
jquery: 'jQuery',
fabric: 'fabric',
},
...
Installed the declaration files for both libraries
npm install #types/jquery -D
npm install #types/fabric -D
Added the libraries in public folder and index.html (since they must not be part of the app bundle)
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/fabric.min.js"></script>
Created a class App.ts, imported and implemented instances of these two libraries. (see App.ts)
import { fabric } from "fabric";
import $ from 'jquery';
fabric resolves to undefined within the class App.ts with the error:
TypeError: Cannot read property 'Canvas' of undefined
Please don't recommend ProvidePlugin or installing Babel.
More about webpack "externals": https://webpack.js.org/configuration/externals/
Update #1
jQuery is now working as an external library. I was not referencing the actual jquery global "jQuery" in the externals setup. I had "JQuery" (with a capital J). That's now resolved and jquery is working. Thanks #Aluan
Fabric on the other hand seems to be a different issue altogether.

What you're looking for is called shimming. Webpack docs cover this extensively here: https://webpack.js.org/guides/shimming/
Edit to add example:
In your webpack.config.js plugins array:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
EDIT:
I pulled down your code and got it working. Here are the steps:
ts-loader chokes on shims, so use babel's #babel/preset-typescript -- otherwise you'll need to find a way to tell the ts compiler to ignore them. This will get you started:
npm install --save-dev #babel/core #babel/cli #babel/preset-env #babel/preset-typescript core-js#3
In your root, create a file called .babelrc and add the following:
{
"presets": [
"#babel/preset-typescript",
[
"#babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3"
}
]
]
}
Add this to your webpack.config.js:
plugins: [
new ProvidePlugin({
$: "jquery",
jQuery: "jquery",
fabric: "fabric"
})
]
Also update ts-loader, changing it to babel-loader.
Now in your code, you'll need to prefix your shimmed libraries with window:
constructor(private readonly selector: string, canvasHeight: number, canvasWidth: number) {
window.$(`#${selector}`).replaceWith(`<canvas id="${selector}" height=${canvasHeight} width=${canvasWidth}> </canvas>`);
this.canvas = new window.fabric.Canvas(`${selector}`, { selection: false });
}

It turns out that the issue with fabric is from fabric itself! The reason fabric is resolving to undefined (when being configured as an external on webpack) is related to the way that fabric exposes its library for consumption. It's an issue they need to fix.
I've added an issue on the official fabric github page
But there is a quick solution for us. Just import using CommonJS like this:
const fabric = require('fabric');
Now it works!

how to include jquery library in angular 2 application

How to include third party jQuery library in Angular 2 application?
How to include http://keith-wood.name/calendarspicker.html jQuery library in angular 2 application?

1-In addition to install it through npm , try to include this line in your angular-cli.json file, inside apps->scripts key like this example:
{
"apps": {
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
]
}
}
2-Add this plugin to your webpack plugins in webpack.config.js (in module.exports):
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
3- Then import it in the component you need to use it, for example:
import * as $ from 'jquery';

To add an external library to an Angular 2 app you download the files and place them in your assets folder (or any folder you may chose to add) angular/src/assets/<your-library> then add the path to the library in your angular-cli.json file. If you upgrade to angular 6 the file is renamed angular.json
Here is an example of one of my angular-cli.json files
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/jqueryui/jquery-ui.js",
"../node_modules/materialize-css/dist/js/materialize.js",
"./assets/RTCMultiConnection.min.js",
"../node_modules/hammerjs/hammer.js",
"./assets/popup.js"
],
It may, however be easier to add an "angular ready" alternative like angular-bootstrap-calendar

Angular - 'Could not find HammerJS'

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says:
Could not find HammerJS. Certain Angular Material components may not work correctly.
I have hammerjs installed and also #angular/material. How do I resolve this issue?
Sidenote
It may be worth noting that if you have hammerjs installed and your components are still not rendering correctly to make sure you are using angular material components and not html elements with materialize-css classes.
If you are using materialize-css instead of angular material, you will need to add it to your project separately.

In your package.json file add this to dependencies
"hammerjs": "^2.0.8",
Or if you want an alternative automatic way just you can type npm i hammerjs --save (or npm i hammerjs#2.0.8 --save if you want, since 2.0.8 is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules folder and reinstall it in the root project folder also by running npm install which will check the dependencies (where hammerjs resides), devDependencies ..., in package.json file and install them.
Also in your polyfills.ts (recommended to have a one if you have not)
import 'hammerjs/hammer';
Thus, it would be found while your angular app is executed since polyfills.ts itself is called by import (in a normal case, else you can check it) in main.ts which is the angular apps' entry point.

Install hammerjs
with npm
npm install --save hammerjs
(or) with yarn
yarn add hammerjs
Then import hammerjs on your app's entry point (e.g. src/main.ts).
import 'hammerjs';

In your systemjs.config.js file you also need to add the following entry:
'hammerjs': 'npm:hammerjs/hammer.js',
along with of course:
'#angular/material': 'npm:#angular/material/bundles/material.umd.js',
The other thing that's missing from your code (at least based on what you have in the GH repo) is the inclusion of the Material Design CSS, add this to your index.html file:
<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
I hope this helps.

this worked for me (and this is with ionic4 as well)
I could make hammer.js work - and also ionic with material.angular.io (in the bottom)
Hammer + ionic (hammer + angular as well):
npm install --save hammerjs
npm install --save #types/hammerjs
then
package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",
then
tsconfig.json - added types as seen below
"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}
then
in app.component.ts (only there)
import 'hammerjs';
then
in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file
Sample code from hammerjs site works
let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
element2.textContent = ev.type +" gesture detected.";
console.log(ev.type +" gesture detected.");
});
Hammer+ionic+material:
to make material hammer work with ionic
in app.module
import { HAMMER_GESTURE_CONFIG } from '#angular/platform-browser';
import { GestureConfig } from '#angular/material';
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]
and voila, your material slider works.

Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root, hit enter and paste:
npm install hammerjs --save
Npm will automatically add all dependencies into your package.json file.

npm install hammerjs --save
npm install #types/hammerjs --save-dev
add this to typescript.config under compiler options
"types": [
"hammerjs"
]
add this to app.components.ts:

Install with
npm install --save hammerjs
or
yarn add hammerjs
After installing, import it on your app's entry point (e.g. src/main.ts).
import 'hammerjs';
Angular Material Getting Started Guide

Starting from Angular 9 you need to add HammerModule to imports array of your AppModule. Please, find the example below:
...
import {
BrowserModule,
TransferState,
BrowserTransferStateModule,
HammerModule, // <-- Hammer Module
} from '#angular/platform-browser';
...
#NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
AppRoutingModule,
HammerModule, // <-- Hammer Module
],
bootstrap: [AppComponent],
})
export class AppModule { }
Don't forget to do npm install or yarn add for adding hammerjs to your project. For a more convenient way, it will be better to install #types/hammerjs

Other than importing hammerJS separately,we can provide this gesture recognition feature to yes while installing angular material(version 8) library with the following command.
npm add #angular/material
Set up HammerJS for gesture recognition?-Yes
Verify the 'hammerjs' is imported into main.ts file

materialize-css Uncaught TypeError: Vel is not a function

I'm using webpack as my bundler/loader and I can load materialize css in fine (js/css), but when I try to use the toast, it says
Uncaught TypeError: Vel is not a function
I am including the library in the main index.js file by:
import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js'
Does anyone know why this could be happening? Looking at the bundled source, the js for materialize is there.

Had a same problem & came up with somewhat simpler solution:
Only 2 things are needed to be done:
First: Import following in you root module like app.js
//given you have installed materialize-css with npm/yarn
import "materialize-css";
import 'materialize-css/js/toasts';
Second: if webpack, set following Plugin or get the velocity.min.js as global variable just like you would use jquery:
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery': "jquery",
"Vel": "materialize-css/js/velocity.min.js"
}),

I'm also trying to use materialize-css with webpack and have also run into this issue (albeit not for the same reason). Materialize isn't really built with a module loader in mind, and use global variables. They also bundle dependencies into their script directly in a way you might not want in a webpack-workflow.
I have a setup not exactly the same as you but I'll share it anyways, hoping it will help, my webpack+materialize works like this in a file i've created;
/**
* custom-materialize.js
*/
// a scss file where we include the parts I use.
require('./custom-materialize.scss');
/**
* materialize script includes
* we don't use all the plugins so no need to
* include them in our package.
*/
require('materialize-css/js/initial');
require('materialize-css/js/jquery.easing.1.3');
require('materialize-css/js/animation');
// note: we take these from npm instead.
//require('materialize-css/js/velocity.min');
//require('materialize-css/js/hammer.min');
//require('materialize-css/js/jquery.hammer');
require('materialize-css/js/global');
//require('materialize-css/js/collapsible');
require('materialize-css/js/dropdown');
Then just install Velocity from npm npm install velocity-animate
and point the global Vel materialize use to that package instead in webpack.
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'Vel': 'velocity-animate'
}),

you have to import css and js Files separately in your index.html
you must not import css file in index.js

Make sure that the uglifyJsPlugin is like this.
new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: false})
mangle property should be false so that the variable names of your source file doesn't change when you minify.

Don't include lodash in production build, but use it when single file is imported

I'm writing my own JS library of helpers that I need in my projects.
https://github.com/kitze/kitze-js-helpers
In the projects where I'm using ES6 and Babel I just want to import some of the helpers like
import {getPropertyFromAnotherArray} from 'kitze-js-helpers/src/helpers/array-helpers';
But I'm getting this error array-helpers.js:66 Uncaught TypeError: _lodash2.default.map is not a function
In the package.json of my library I have this:
"browser": {
"lodash": false,
"atob": false,
"btoa": false
},
"browserify": {
"transform": [
"babelify",
"browserify-shim"
]
},
"browserify-shim": {
"lodash": "global:_"
}
The error goes away if I remove those properties from package.json, but then lodash, atob, and btoa will get bundled along with my helpers in the dist/ folder.
At the top of array-helpers.js I have
import _ from 'lodash'
So the behaviour that I want is:
If the library is used as a bundled/minified version I would
like lodash not to be bundled inside with the helpers, but to be used
from window._ , so lodash must be included with a
before the helpers.
If the library is used in ES6 environment and only one file is
included, lodash should be used from the node_modules folder of the current project where the helpers are included.
When building a bundled/minified version of the library lodash should be ignored and not included in the final build.
Any help?