Hello à tous

Je viens soliciter votre aide aujourd'hui car j'ai un souci que je n'arrive pas à résoudre avec la compilation de webpack Encore.

Je m'explique, j'ai plusieurs fichier .js dans mon dossier assets/js/mesfichier.js

Lors de la compilation des fichier, Encore me remplace certains nom de module par quelque chose comme cela "__WEBPACK_AMD_DEFINE_FACTORY__" ou "__WEBPACK_AMD_DEFINE_RESULT__"

Voici deux exemple de code, le premier sans la compilation et le second compiler :

function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):(a=a||self,a.PerfectScrollbar=b())}

et la version compilée de ce bout de code :

function (a, b) {
  "object" == ( false ? 0 : _typeof(exports)) && "undefined" != "object" ? module.exports = b() :  true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (b),
		__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
		(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :
		__WEBPACK_AMD_DEFINE_FACTORY__),
		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : (0);
}

Pas besoin de vous dire que cela me crée des erreur JS dans ma console que je ne vois absolument pas comment résoudre.

Je vous donne ma configuration de webpack.config.js qui est restée "d'usine"

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

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 subdirectory deploy
    //.setManifestKeyPrefix('build/')
    .copyFiles({
        from: './assets/images',
    })

    /*
     * ENTRY CONFIG
     *
     * 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/app.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    // .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // configure Babel
    // .configureBabel((config) => {
    //     config.plugins.push('@babel/a-babel-plugin');
    // })

    // enables and configure @babel/preset-env polyfills
    // .configureBabelPresetEnv((config) => {
    //     config.useBuiltIns = 'usage';
    //     config.corejs = '3.23';
    // })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    // .enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    // .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Merci pour vos idées ;-)

Julien

Salut

Quel genre d'erreur la console te signale-t'elle ?

Hello Ymox,

Pour le cas que je montre ici elle me dit cela :

Uncaught ReferenceError: PerfectScrollbar is not defined

Ma foi, je n'ai pas encore tout saisi entre les minifications et le "tree shaking", mais est-ce que par hasard tu n'aurais pas importé/utilisé une "mauvaise" version du script, genre ES ou AMD à la place de UMD ?

Hello, merci beaucoup pour ta réponse.

Je précise aussi que j'utilise babel pour la compilation (moi non plus je ne comprend pas toute la procédure de minification) et que visiblement c'est la librairie perfect-scrollbar qui pose problème