Import a jQuery plugin in a module

Question

I'm trying to import a jQuery plugin (js-offcanvas) with npm but I keep getting the same error:

app.js:20: Uncaught TypeError: $(...).offcanvas is not a function

the app.js file:

import offcanvas from "js-offcanvas"

$('#off-canvas').offcanvas({
  // options
});
$( function(){
  $(document).trigger("enhance");
});

the html file:

<body>
  <div class="c-offcanvas-content-wrap">
    ...
    <a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
    ...
  </div>
  <aside id="off-canvas"></aside>
</body>

I'm not sure if I'm doing something wrong.

Update Here is my brunch-config.js file:

exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
  javascripts: {
    joinTo: "js/app.js"

    // To use a separate vendor.js bundle, specify two files path
    // https://github.com/brunch/brunch/blob/master/docs/config.md#files
    // joinTo: {
    //  "js/app.js": /^(js)/,
    //  "js/vendor.js": /^(vendor)|(deps)/
    // }
    //
    // To change the order of concatenation of files, explicitly mention here
  // https://github.com/brunch/brunch/tree/master/docs#concatenation
  // order: {
  //   before: [
  //     "vendor/js/jquery-2.1.1.js",
  //     "vendor/js/bootstrap.min.js"
  //   ]
  // }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },
npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
    }
  }
};

Yes, I updated the question to show the brunch-config.js file — kayne, Apr 20 '17 at 10:57
I really wanted to help you but I couldn't figure it out. But on is for sure, you cannot import the plugin like this or with another way because the plugin does not support it. It's only working via the global space. In my opinion, just leave it out. ;) — Johannes Filter, Apr 21 '17 at 09:13

score 0 · Answer 1 · answered Apr 05 '18 at 07:14

Try npm.static like this:

npm: {
  static: ['node_modules/${plugin-name}/${js-path}']
}

This will include the selected files into the joined file. More on this in the docs.

npm.static: Array: a list of javascript files from npm packages to be included as-is, without analyzing their dependencies or wrapping them into modules.

Import a jQuery plugin in a module

1 Answers1