install vex with npm #141

paseo · 2015-11-16T03:41:20Z

It is wanderful,if publish the vexjs to npmjs.org

peacechen · 2015-11-20T22:28:44Z

https://www.npmjs.com/package/vex-js

ConAntonakos · 2015-12-30T21:21:04Z

Having some issues requiring the npm module in a file.

In order to use vex.dialog, it seems like you have to do the following:

import vex from 'vex-js';
vex.dialog = require('vex-js/js/vex.dialog.js');

How would you include the CSS files? Are you expecting it to be?:

import 'vex-js/css/vex.css';
import 'vex-js/css/vex-theme-os.css';

Because the above did not work.

peacechen · 2015-12-30T23:56:25Z

CSS files are normally added to the <HEAD>:

<link rel="stylesheet" href="node_modules/vex-js/css/vex.css">

paseo · 2015-12-31T03:51:02Z

@ConAntonakos
use webpack can resolve the css file import problem
I will create a file named vex.js, import all module&css from the vex's filepath of node_modules and then export the vex

nozpheratu · 2016-01-26T17:49:21Z

I'm new to webpack, but this library doesn't appear to work out of the box when I try to require the vex.dialog file.

window.vex = require('vex-js/js/vex.dialog');

And here's my failing webpack build log:

Version: webpack 1.12.12
Time: 258ms
  Asset    Size  Chunks             Chunk Names
main.js  275 kB       0  [emitted]  main
   [0] ./assets/javascripts/application.js 46 bytes {0} [built]
   [1] ./~/vex-js/js/vex.dialog.js 5.85 kB {0} [built] [1 error]
   [2] ./~/jquery/dist/jquery.js 258 kB {0} [built]

ERROR in ./~/vex-js/js/vex.dialog.js
Module not found: Error: Cannot resolve module 'vex' in /home/cyle/npm-test/frontend/node_modules/vex-js/js
 @ ./~/vex-js/js/vex.dialog.js 146:4-47

Looks like it's having trouble resolving it's own module. Do I need to do some sort of shim here to get things working? If I had to take a guess it seems it's looking for a module named "vex" rather than "vex-js".

nozpheratu · 2016-01-26T18:34:08Z

I think I found the problem... https://github.com/HubSpot/vex/blame/master/js/vex.dialog.js#L146

Changing this line from:

define(['jquery', 'vex'], vexDialogFactory);

To:

define(['jquery', 'vex-js'], vexDialogFactory);

Seems to get things working for me. Is this a bug or am I going about this wrong?

nozpheratu · 2016-01-26T19:08:00Z

#140 also seems to mitigate the issue I've been having.

ferhtgoldaraz · 2016-07-20T07:12:38Z

What @nozpheratu said worked for me (using webpack). If the define implementations resolve module names in a npm compatible way, it makes sense, since this package is not named 'vex' but 'vex-js'.

markstos · 2016-07-20T19:10:38Z

Note that #160 proposes a new version of vex and vex dialog with some backward incompatible changes. You are encouraged to review it and see if would address your concerns here.

bbatliner · 2016-08-09T22:26:49Z

Hey all! See my comment on #60 and let me know if your issue is resolved! Thanks!

paseo · 2016-08-10T08:55:46Z

I will verify this issue later.

paseo · 2016-08-10T12:50:54Z

The new version of vex works fine with webpack.

vex version: 3.0.0-beta.1
webpack version: 1.13.1

The test code comes from demo of vex's document :

var vex = require('vex-js');
vex.registerPlugin(require('vex-dialog'));
vex.defaultOptions.className = "vex-theme-os";

vex.dialog.confirm({
      message: 'Are you absolutely sure you want to destroy the alien planet?',
      callback: function (value) {
          if (value) {
              console.log('Successfully destroyed the planet.')
          } else {
              console.log('Chicken.')
          }
      }
    })

mehrad77 · 2019-08-14T10:58:00Z

please add a guide to readme.md.
is this project abandoned?

markstos · 2019-08-14T13:47:40Z

Yes, the product appears abandoned. It's time for someone new to volunteer to maintain it or fork it.

scottw-finao · 2020-03-04T22:42:07Z

I recently ran into this trying to update an old codebase to work with require.js loading for an AWS conversion of an older filesystem based tool.

Initially I set up shims and manually assigned window.vex and got vex but didn't get vex.dialog. I found out you can manually assign vex.dialog also using this method.

Tracing the code, the version I have seems to check first if 'define' is a function and has the property define.amd (this is the 'if' that triggers on my system), then checks for typeof exports = object, then falls back to setting window.vex or window.vex.dialog respectively. In the first two cases, it seems to be defining vexFactory and vexDialogFactory respectively.

The old code was using the global window.vex namespace access to the functionality, so I was trying to maintain that for the time being and hoped to update the dialogs later when I have more time.

Problem was, that even setting up a shim for each, I wasn't getting any definitions of vexFactory or vexDialogFactory in the code. But I could pass them in and use them. So I ended up with a main require.js loader like this:

requirejs.config({
    "baseUrl": "/js/lib",
    "paths": {
        "MyApp1"    : "../awsS3/MyApp1",
        "MyApp2"    : "../awsS3/MyApp2",
        "MyHelper1" : "../awsS3/MyHelper1",
        "MyHelper2" : "../awsS3/MyHelper2"
    },
    "shim": {
        "jquery.custom" : {
            "deps" : ['jquery'],
            "exports" : "$"
        },
        "vex" : {
            "deps": ['jquery.custom'],
            "exports": 'vexFactory'
        },
        "vex.dialog" : {
            "deps":['jquery.custom','vex'],
            "exports": 'vexDialogFactory'
        },
        "aws-sdk" : {
            "exports" : "AWS"
        },
        "MyHelper1": {
            "deps": ["jquery.custom"]
        },
        "MyHelper2": {
            "deps": ["jquery.custom", "aws-sdk"]
        },
        "MyApp1": {
            "deps" : ["jquery.custom", "vex.dialog", "MyApp2", "MyHelper1", "MyHelper2"]
        },
        "MyApp2": {
            "deps" : ["MyHelper1", "jquery.custom","vex.dialog"]
        }
    }
})

// Start the main app logic.
requirejs(
    ["MyApp1", "MyApp2", "MyHelper1", "MyHelper2", "vex", "vex.dialog"],
    function   (AppOne, AppTwo, HelperOne, HelperTwo, vex, vexDialog) {

        $(function() {

            // initialize vex global settings
            vex.defaultOptions.className = 'vex-theme-custom'
            vex.defaultOptions.appendLocation = '#addtocart'

            // create global window.vex instance
            window.vex = vex
            // manually attach vexDialog to window.vex
            if(!window.vex.hasOwnProperty('dialog') || (typeof(window.vex.dialog !== "object")))
                window.vex.dialog = vexDialog

            // initialize my own app stuff
            app1 = new AppOne()
            app2 = new AppTwo({'appone':app1})

            // other init stuff deleted
        })
    }
)

I include the conditional code on the setting of vex.dialog as I wanted some of my other code to be able to be more portable and not depend on the main code wrapper, so each of them is capable of initializing vex themselves if the global definition is not available. (similarly you could check if window.vex or just a global reference to vex to see if it is typeof object before re-assigning)

In our case, we have some of our own extensions on jquery, thus the wrapper around jquery with the 'jquery.custom' shim which loads the 'extends()' code to modify the jquery with our helpers.

This method seems to allow the old code to work with inline global references like:

vex.dialog.alert('some message')

Similarly, I didn't have the local references (inside the apps mentioned above) attach specifically to 'window.vex' but instead just use the local scoped 'vex' passed in at the top attached to the require.js wrappers. (which is why I exclude the initial condition in the example) in which case the same kind of global references work with any code in that scope. e.g....

// MyApp1 example:
define(
    ["MyHelper1","jquery.custom","vex","vex.dialog"],
    function(HelperOne, $, vex, vexDialog) {
        "use strict"

        // make sure vex.dialog is attached
        if(!vex.hasOwnProperty('dialog') || (typeof(vex.dialog !== "object")))
            vex.dialog = vexDialog

        function MyApp1(settings) {
            this.init(settings)
        }

        MyApp1.prototype = {
            constructor: MyApp1,
            // other object code
            // references to vex.dialog.* will use the locally scoped vex passed in at top
            //   or presumably (untested) fall back to the window.vex if not passed in
        }

        return MyApp1
    }
)

I'm not sure (and haven't tried) if referencing vexDialog directly would have the desired results or not.

I tinkered a bit with trying to access the factory definitions themselves, but even with switching the if/then/else order in the object code so the export was checked first (and thus triggered) I couldn't seem to 'see' the vexFactory or vexDialogFactory in the scope even with the 'exports' values in the shim definition.

markstos · 2020-03-05T15:46:04Z

@scottw-finao What doe your comment have to do with the issue topic "Install vex with NPM" ?

scottw-finao · 2020-03-05T17:19:10Z

The scopes are very relevant if you aren't able to 'see' vex after installing with npm.

ferhtgoldaraz mentioned this issue Jul 20, 2016

"vex not defined" when implemeting using requireJS #60

Closed

ferhtgoldaraz mentioned this issue Jul 20, 2016

Fix amd support and webpack #161

Closed

paseo closed this as completed Aug 10, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

install vex with npm #141

install vex with npm #141

paseo commented Nov 16, 2015

peacechen commented Nov 20, 2015

ConAntonakos commented Dec 30, 2015

peacechen commented Dec 30, 2015

paseo commented Dec 31, 2015

nozpheratu commented Jan 26, 2016

nozpheratu commented Jan 26, 2016

nozpheratu commented Jan 26, 2016

ferhtgoldaraz commented Jul 20, 2016

markstos commented Jul 20, 2016

bbatliner commented Aug 9, 2016

paseo commented Aug 10, 2016

paseo commented Aug 10, 2016

mehrad77 commented Aug 14, 2019 •

edited

Loading

markstos commented Aug 14, 2019

scottw-finao commented Mar 4, 2020

markstos commented Mar 5, 2020

scottw-finao commented Mar 5, 2020

install vex with npm #141

install vex with npm #141

Comments

paseo commented Nov 16, 2015

peacechen commented Nov 20, 2015

ConAntonakos commented Dec 30, 2015

peacechen commented Dec 30, 2015

paseo commented Dec 31, 2015

nozpheratu commented Jan 26, 2016

nozpheratu commented Jan 26, 2016

nozpheratu commented Jan 26, 2016

ferhtgoldaraz commented Jul 20, 2016

markstos commented Jul 20, 2016

bbatliner commented Aug 9, 2016

paseo commented Aug 10, 2016

paseo commented Aug 10, 2016

mehrad77 commented Aug 14, 2019 • edited Loading

markstos commented Aug 14, 2019

scottw-finao commented Mar 4, 2020

markstos commented Mar 5, 2020

scottw-finao commented Mar 5, 2020

mehrad77 commented Aug 14, 2019 •

edited

Loading