Having to include require #89

New Issue

2017-04-01T16:34:10-05:00

GiraffeCoding commented

2017-04-01 16:34:10 -05:00

(Migrated from github.com)

Hi,

When trying to use switches I have to include the Require library in my HTML.

I then get constant file issues in node_modules.

Uncaught Error: Module name "events/on.js" has not been loaded yet for context: _. Use require([])

Just trying to add animation to the example in bower

Hi, When trying to use switches I have to include the Require library in my HTML. I then get constant file issues in node_modules. `Uncaught Error: Module name "events/on.js" has not been loaded yet for context: _. Use require([])` Just trying to add animation to the example in bower

MoOx commented

2017-04-02 02:23:43 -05:00

(Migrated from github.com)

How are you consuming the module?

GiraffeCoding commented

2017-04-03 16:31:54 -05:00

(Migrated from github.com)

im loading the pjax.js withing a common.js file:

then calling:

require(['pjax'], function(pjax){

        alert('pjax loaded');

        var p = new pjax({
          selectors: ["title", ".js-Pjax"],
          switches: {
            ".js-Pjax": require("pjax/lib/switches.js").sideBySide
          },
          switchesOptions: {
            ".js-Pjax": {
              classNames: {
                // class added on the element that will be removed
                remove: "Animated Animated--reverse Animate--fast Animate--noDelay",
                // class added on the element that will be added
                add: "Animated",
                // class added on the element when it go backward
                backward: "Animate--slideInRight",
                // class added on the element when it go forward (used for new page too)
                forward: "Animate--slideInLeft"
              },
              callbacks: {
                // to make a nice transition with 2 pages as the same time
                // we are playing with absolute positioning for element we are removing
                // & we need live metrics to have something great
                // see associated CSS below
                removeElement: function(el) {
                  el.style.marginLeft = "-" + (el.getBoundingClientRect().width/2) + "px"
                }
              }
            }
          }
        })
      });

if i add the brackets into the require switches.js call it then asks for it be done to every .js file in the lib folder

im loading the pjax.js withing a common.js file: then calling: ```js require(['pjax'], function(pjax){ alert('pjax loaded'); var p = new pjax({ selectors: ["title", ".js-Pjax"], switches: { ".js-Pjax": require("pjax/lib/switches.js").sideBySide }, switchesOptions: { ".js-Pjax": { classNames: { // class added on the element that will be removed remove: "Animated Animated--reverse Animate--fast Animate--noDelay", // class added on the element that will be added add: "Animated", // class added on the element when it go backward backward: "Animate--slideInRight", // class added on the element when it go forward (used for new page too) forward: "Animate--slideInLeft" }, callbacks: { // to make a nice transition with 2 pages as the same time // we are playing with absolute positioning for element we are removing // & we need live metrics to have something great // see associated CSS below removeElement: function(el) { el.style.marginLeft = "-" + (el.getBoundingClientRect().width/2) + "px" } } } } }) }); ``` if i add the brackets into the require switches.js call it then asks for it be done to every .js file in the lib folder

MoOx commented

2017-04-03 23:17:36 -05:00

(Migrated from github.com)

You are mixing amd with commonjs. This cannot work this way. Not sure how to handle this with amd.

GiraffeCoding commented

2017-04-04 03:09:54 -05:00

(Migrated from github.com)

Thats fair enough. What is the recommended approach to loading? Do you just use commonjs on your website? I've tried the standalone js with nothing else and it still asks to me use require([]) on the switches.js require call.

GiraffeCoding commented

2017-04-04 03:16:08 -05:00

(Migrated from github.com)

Even when trying to use something like the below in the example doesn't seem to work:

new Pjax({
  selectors: ["title", ".js-Pjax"],
  switches: {
    ".js-Pjax": require("pjax/lib/switches.js").sideBySide
  },
  switchesOptions: {
    ".js-Pjax": {
      classNames: {
        // class added on the element that will be removed
        remove: "Animated Animated--reverse Animate--fast Animate--noDelay",
        // class added on the element that will be added
        add: "Animated",
        // class added on the element when it go backward
        backward: "Animate--slideInRight",
        // class added on the element when it go forward (used for new page too)
        forward: "Animate--slideInLeft"
      },
      callbacks: {
        // to make a nice transition with 2 pages as the same time
        // we are playing with absolute positioning for element we are removing
        // & we need live metrics to have something great
        // see associated CSS below
        removeElement: function(el) {
          el.style.marginLeft = "-" + (el.getBoundingClientRect().width/2) + "px"
        }
      }
    }
  }
})

Just never loads the switches.js correctly

Even when trying to use something like the below in the example doesn't seem to work: ```js new Pjax({ selectors: ["title", ".js-Pjax"], switches: { ".js-Pjax": require("pjax/lib/switches.js").sideBySide }, switchesOptions: { ".js-Pjax": { classNames: { // class added on the element that will be removed remove: "Animated Animated--reverse Animate--fast Animate--noDelay", // class added on the element that will be added add: "Animated", // class added on the element when it go backward backward: "Animate--slideInRight", // class added on the element when it go forward (used for new page too) forward: "Animate--slideInLeft" }, callbacks: { // to make a nice transition with 2 pages as the same time // we are playing with absolute positioning for element we are removing // & we need live metrics to have something great // see associated CSS below removeElement: function(el) { el.style.marginLeft = "-" + (el.getBoundingClientRect().width/2) + "px" } } } } }) ``` Just never loads the switches.js correctly

MoOx commented

2017-04-10 08:10:11 -05:00

(Migrated from github.com)

You should use browserify or webpack.

Note: use 3 backticks for code blocks

You should use browserify or webpack. Note: use 3 backticks for code blocks

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#89