import requirejs amd module with webpack

Question

I'm using Converse.js and it's prebuilt into the RequireJS/AMD syntax. Including the file from a CDN you could use it like require(['converse'], function (converse) { /* .. */ }). How is it possible to use this with webpack? I would like to bundle converse.js with my webpack output.

I have the file on disk, and want to import it like

import converse from './converse.js';
converse.initialize({ .. });

Webpack picks up the file and bundles it correctly, although it's not useable yet as it throws 'initialize is not a function'. What am I missing?

@AndyRay because it's not a module on npm, it's being built and then published. npm is basically 'hosting' the app. i have no idea why it's on npm to be honest.. — bitten
@Frxstrem some "Jed" object. using the first code example in my question i have access to a bunch of things, including initialize. if i run the above, i get "initialize is not a function" — bitten

Filip Dupanović Filip Dupanović · Accepted Answer · 2016-12-09T10:59:12

I suspect the way their bundle is built will not work correctly with how Webpack evaluates modules in a limited context.

From their builds, taking the built AMD module via NPM without dependencies should be parsable by Webpack and it will enable you to provide the dependencies to avoid dupes in the final output.

If all else fails, using the script-loader will evaluate the script in the global context and you'd get the same experience as if you'd have followed their usage guidelines to reference it from a CDN, just don't forget to configure the globals for your linter.

import requirejs amd module with webpack

1 Answers