CODEWITHSUNDEEP
javascriptwebpackwebpack-encoreblazy
Etshy
Etshy

Reputation: 880

Webpack Encore - How to import any library (minified version if possible)?

I have some problems with webpack Encore. I'm crrently trying to add this library to my project : https://github.com/dinbror/blazy but when i do a require on the js files(minified or not) from this library, I got this error

jquery.js:3827 Uncaught ReferenceError: Blazy is not defined
    at HTMLDocument.<anonymous> (reader_init.js:215)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)

I do my require like this : require('../vendor/bLazy/blazy'); (vendor is the folder where my Bower dep are installed)

The library IS in the generated file.

So I would like to know if there is a way to require any library with webPack Encore ?

ps : For info, it worked great with a historyjs library (non minified version only, though)

require('../vendor/history.js/scripts/bundled-uncompressed/html5/jquery.history');

Here is my webpack.config.js if it can help

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath((!Encore.isProduction())?'/rapp/public/build':'/build')

    // this is now needed so that your manifest.json keys are still `build/foo.js`
    // i.e. you won't need to change anything in your Symfony app
    .setManifestKeyPrefix('build')

    // will create public/build/main.js and public/build/main.css
    .addEntry('main', './assets/js/main.js')
    //Add entry if other js/css needed. first parameter is the generated filename.
    //require scss file in js. (if you addEntry for scss file only, it will create a js file with same name)
    .addEntry('reader', './assets/js/reader.js')

    //file upload with dropzone
    .addEntry('dropzone', './assets/js/dropzone.js')

    //Admin chapter js
    .addEntry('admin-chapter', './assets/js/chapter.js')

    //addStyleEntry : for css file only

    // allow sass/scss files to be processed
    .enableSassLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

// create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    .createSharedEntry('vendor', [
        'jquery',
    ])

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })

    .configureFilenames({
        images: '[path][name].[hash:8].[ext]'
    })
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

EDIT SOLUTION : I saw a comment that helped me (thanks to you)

import Blazy from '../vendor/bLazy/blazy.min' works great. I thought the required() method was an equivalent of import but seems not.

Upvotes: 0

Views: 2789

Answers (1)

Etshy
Etshy

Reputation: 880

import Blazy from '../vendor/bLazy/blazy.min'

thanks to the one that commented.

ps : I didn't see how to mark as solved without any answer so I did this one to select it as answer

Upvotes: 0

Related Questions