Notes on importing Alpaca in UDV

Alpaca is a js lib for forms generation. Our purpose is to import it using npm and webpack. These notes can be useful for other lib importation...

Short story

Install the following libraries:

npm install alpaca 
npm install bootstrap # dependency of alpaca
npm install popper.js # dependency of bootstrap
npm install jquery # dependency of alpaca
npm install handlebars # dependency of alpaca

Configure webpack to look for the right handlebars js file when bundling: Add the following to webpack.config.js :

resolve: {
    alias: {
       handlebars: 'handlebars/dist/handlebars.min.js'
    }
}

Configure webpack to replace any $ or jQuery occurences by jquery in the modules it bundles (jquery being the right name of the node module). To do that, you need to add the following to webpack.config.js:

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

To use alpaca and jquery, add the following at the top of the files using them:

import $ from 'jquery';
import 'alpaca';

Long story

CDN vs npm

Alpaca demos make use of CDN. It seems to be a good solution widely used and stable. However, our packaging system is based on using npm + webpack and using only this framework would be clearer.

Use Alpaca with CDNs

According to Alpaca's doc, to use it with CDNs, you need to fetch the code of jquery, bootstrap, handlebars and alpaca + to add the bootstrap stylesheet and the alpaca stylesheet:

    <!-- dependencies (jquery, handlebars and bootstrap) -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
    <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
     
    <!-- alpaca -->
    <link type="text/css" href="//code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="//code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js"></script>

Note that using this solution wouldn't fit "UDV philosophy" which is that each "Module" is independant and contains all of its components (js, html, css) so that when building a Demo it is possible to call it using something like var mod = new udvcore.module();

Use Alpaca with npm

The Download section says that one only need to do an npm install alpaca to download it in your project. However, doing this and adding import 'alpaca' to your js file fails when running npm start:

ERROR in ./~/alpaca/dist/alpaca/bootstrap/alpaca.js
Module not found: Error: Can't resolve 'jquery' in '/home/vincent/Documents/dev/UDV/UDV-Core/node_modules/alpaca/dist/alpaca/bootstrap'
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js 12:33-50 17:8-70
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi es6-promise ./src/Main.js

ERROR in ./~/alpaca/dist/alpaca/bootstrap/alpaca.js
Module not found: Error: Can't resolve 'handlebars' in '/home/vincent/Documents/dev/UDV/UDV-Core/node_modules/alpaca/dist/alpaca/bootstrap'
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js 12:52-73 17:8-70
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi es6-promise ./src/Main.js

ERROR in ./~/alpaca/dist/alpaca/bootstrap/alpaca.js
Module not found: Error: Can't resolve 'bootstrap' in '/home/vincent/Documents/dev/UDV/UDV-Core/node_modules/alpaca/dist/alpaca/bootstrap'
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js 12:75-95 17:8-70
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi es6-promise ./src/Main.js

Note: import * as alp from alpaca doesn't work either

Known problems importing alpaca with webpack:

Only one person seems to have the same problem at the end of this thread: https://github.com/gitana/alpaca/issues/265 . I've tried this solution which doesn't work either.

Apparently there was an issue when using webpack to import alpaca a few month ago which has been resolved since (I checked in the package.json of alpaca downloaded using npm install): https://github.com/gitana/alpaca/issues/567 .

Searching alpaca github repository for webpack doesn't give much more input than that...

#### Resuming install attempts

There is still errors after installing (using npm install) bootstrap, jquery and handlebars:

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js 12:52-73 17:8-70
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server es6-promise ./src/Main.js

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js 12:52-73 17:8-70
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server es6-promise ./src/Main.js

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js 12:52-73 17:8-70
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server es6-promise ./src/Main.js

ERROR in ./~/handlebars/lib/index.js
Module not found: Error: Can't resolve 'fs' in '/home/vincent/Documents/dev/UDV/UDV-Core/node_modules/handlebars/lib'
 @ ./~/handlebars/lib/index.js 17:11-24
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server es6-promise ./src/Main.js

ERROR in ./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/home/vincent/Documents/dev/UDV/UDV-Core/node_modules/bootstrap/dist/js'
 @ ./~/bootstrap/dist/js/bootstrap.js 7:101-121
 @ ./~/alpaca/dist/alpaca/bootstrap/alpaca.js
 @ ./src/Modules/Documents/Contribute.js
 @ ./src/Main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server es6-promise ./src/Main.js

Note that installing bootstrap introduces the error about 'popper.js' and installing handlerbars the other errors and warnings.

According to bootstrap's doc for using it within a webpack app, you need to npm install jquery and popper.js.

jQuery has already been installed for alpaca, and installing popper.js makes the error disappear.

For the handlebars warning and error. There is a solution here which works. Just add this to the webpack.config.js:

resolve: {
    alias: {
       handlebars: 'handlebars/dist/handlebars.min.js'
    }
}

Ok so now no warning nor errors when running npm install and npm start. However, running the app doesn't work; the error is:

ReferenceError: jQuery is not defined[Learn More]
udvcore.js%20line%204149%20%3E%20eval:7985:1
<anonymous>
alpaca.js:7982
<anonymous>
alpaca.js:12
<anonymous>
alpaca.js:2
<anonymous>
alpaca.js:1
<anonymous>
http://localhost:8080/dist/udvcore.js:4149:1
__webpack_require__
http://localhost:8080/dist/udvcore.js:670:12
fn
http://localhost:8080/dist/udvcore.js:96:20
<anonymous>
Contribute.js:3
<anonymous>
http://localhost:8080/dist/udvcore.js:4185:1
__webpack_require__
http://localhost:8080/dist/udvcore.js:670:12
fn
http://localhost:8080/dist/udvcore.js:96:20
<anonymous>
webpack-internal:///299:80:19
<anonymous>
http://localhost:8080/dist/udvcore.js:4104:1
__webpack_require__
http://localhost:8080/dist/udvcore.js:670:12
fn
http://localhost:8080/dist/udvcore.js:96:20
<anonymous>
http://localhost:8080/dist/udvcore.js:6798:18
__webpack_require__
http://localhost:8080/dist/udvcore.js:670:12
<anonymous>
http://localhost:8080/dist/udvcore.js:719:18
<anonymous>
http://localhost:8080/dist/udvcore.js:11:18
webpackUniversalModuleDefinition
http://localhost:8080/dist/udvcore.js:9:21
<anonymous>
http://localhost:8080/dist/udvcore.js:1:11

jQuery seems to be invoked by alpaca which doesn't knows it.

Brutally adding jquery from node modules in Demo.html with the following line: <script src="../node_modules/jquery/dist/jquery.min.js"></script> works.

However this is not ideal and a better solution is to configure webpack to replace any $ or jQuery occurences by jquery which corresponds to the name of the node module. To do that, you need to add the following to webpack.config.js:

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

2018_04_17_ _Import_Alpaca_in_UDV - VCityTeam/UD-SV GitHub Wiki

Notes on importing Alpaca in UDV

Short story

Long story

CDN vs npm

Use Alpaca with CDNs

Use Alpaca with npm

Known problems importing alpaca with webpack:

⚠️ GitHub.com Fallback ⚠️

2018_04_17_ _Import_Alpaca_in_UDV - VCityTeam/UD-SV GitHub Wiki

Notes on importing Alpaca in UDV

Short story

Long story

CDN vs npm

Use Alpaca with CDNs

Use Alpaca with npm

Known problems importing alpaca with webpack:

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️