0

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.

Herr Nentu'
  • 1,438
  • 3
  • 18
  • 49
  • 2
    How did you import it? Can you please post the entire line that contains `require('resumablejs');` and where the file is, also where did you try to use it, which file it is - is the file imported correctly? – domagoj Nov 06 '19 at 19:54
  • @Domagoj I have added more details if this helps – Herr Nentu' Nov 07 '19 at 09:58

0 Answers0