ResumableJs not working with Webpack / Webpackencore

204 Views Asked by At

I have installed Resumablejs with Yarn and I see it in node_module folder.

Webpack.config.js

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')

    ....

var config = Encore.getWebpackConfig();
var path = require('path');

config.resolve.alias = {
'jquery': path.resolve(__dirname, 'node_modules/jquery/src/jquery'),
'resumablejs': path.resolve(__dirname, 'node_modules/resumablejs/resumable')
};

module.exports = config;

package.json

   "dependencies": {
    ...
     "resumablejs": "^1.1.0",
    ...
   }

app.js

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.scss');
const $ = require('jquery');
global.$ = global.jQuery = $;

require('resumablejs');
...

import './EntriesJs';

EntriesJs

import AppScripts from './js/appScripts';

export {
    AppScripts
}

In my app.js i have declare it require('resumablejs'); and then in my file I want to use it like this:

module.exports = function (uploadJs) {
    return filesUploadScript();
};

function filesUploadScript() {
    (function () {

        console.log('js loaded...');

        var uploaderWidgetProperties = $('#_f-uploader-widget-properties');

        var r = new Resumable({ ... });

but at this point I am getting the following error:

Uncaught ReferenceError: Resumable is not defined

I have a hard time understanding Webpack so any help will be great.

0

There are 0 best solutions below