Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

[bastien70]

Hello, I tried to upgrade webpack-encore on a Symfony 5.3 project

I followed the doc well, and upgraded webpack-encore and stimulus. I also modified the controllers.json as shown.

But when I try the npm run dev command, I have the following error:

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[3].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
 - configuration.output has an unknown property 'assetModuleFilename'. These properties are valid:
   object { auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, futureEmitAssets?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.

I tried modifying my webpack.config.js leaving only the bare minimum to see if it came from that. But the problem persists so I don't understand where it came from

[stof]

Can you share your webpack.config.js ? Otherwise, there is nothing we can do to reproduce that.

[bastien70]

Yes, this is my webpack.config.js :

var Encore = require('@symfony/webpack-encore');
var dotenv = require("dotenv");

// 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 sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * 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.
     */
    // Sylvia
    .addEntry("app", "./assets/app/app.js")

    // Manuels
    .copyFiles({
        from: "./assets/app/files/manuels",
        to: "files/manuels/[path][name].[hash:8].[ext]",
    })

    // Bootswatch
    // .addEntry("bootswatch/flatly", "./assets/bootswatch/flatly/flatly.js")
    // .addEntry("bootswatch/minty", "./assets/bootswatch/minty/minty.js")

    // Components
    .addEntry("components", "./assets/components/components.js")

    // Mailer
    .addStyleEntry("email", "./assets/email/email.scss")

    .copyFiles({
        from: "./assets/email/images",
        to: "images/[path][name].[hash:8].[ext]",
    })

    // Libraries
    .addEntry("lib", "./assets/lib/lib.js")

    // Sidebar
    .addEntry("sidebar", "./assets/sidebar/sidebar.js")

    // Stripe
    // .addEntry("stripe", "./assets/stripe/stripe.js")

    // Stripe admin
    .addEntry("stripe_admin", "./assets/stripe/admin/stripe_admin.js")

    // Stripe client
    .addEntry("stripe_client", "./assets/stripe/client/stripe_client.js")

    // Login
    .addEntry("login", "./assets/app/login/login.js")

    // Website
    .addEntry("website", "./assets/gaas/main.js")

    //Website admin
    .addEntry("website_admin", "./assets/gaas/admin/main.js")

    .copyFiles({
        from: "./assets/gaas/img",
        to: "gaas/img/[path][name].[hash:8].[ext]",
    })

    // Maintenance
    .addStyleEntry("maintenance", "./assets/maintenance/maintenance.scss")

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // 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())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

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

    // 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()

    .configureDefinePlugin((options) => {
        const env = dotenv.config();

        if (env.error) {
            throw env.error;
        }

        options["process.env"].ALGOLIA_API_KEY = JSON.stringify(
            env.parsed.ALGOLIA_API_KEY
        );
        options["process.env"].ALGOLIA_ID = JSON.stringify(env.parsed.ALGOLIA_ID);

        options['process.env'].STRIPE_PUBLIC_KEY = JSON.stringify(env.parsed.STRIPE_PUBLIC_KEY);
    });

module.exports = Encore.getWebpackConfig();

[Lyrkan]

It seems that you are using an old version of Webpack, could you also show the content of your package.json file?

[bastien70]

Yes of course :

{
    "devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
        "@symfony/webpack-encore": "^1.0.4",
        "core-js": "^3.8.3",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^9.0.3",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.13.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.2",
        "@fullcalendar/core": "^4.4.2",
        "@fullcalendar/daygrid": "^4.4.2",
        "@fullcalendar/interaction": "^4.4.2",
        "@fullcalendar/list": "^4.4.2",
        "@fullcalendar/timegrid": "^4.4.2",
        "@ttskch/select2-bootstrap4-theme": "^1.5.2",
        "ajaxchimp": "^1.3.0",
        "animate.css": "^4.1.1",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "bootstrap-datepicker": "^1.9.0",
        "bootstrap-input-spinner": "^1.17.2",
        "bootswatch": "^4.6.0",
        "bs-custom-file-input": "^1.3.4",
        "chart.js": "^2.9.3",
        "counterup": "^1.0.2",
        "dotenv": "^8.2.0",
        "file-loader": "^6.2.0",
        "flat-icons": "^1.0.0",
        "flatpickr": "^4.6.9",
        "font-awesome": "^4.7.0",
        "foundation-emails": "^2.3.1",
        "gasparesganga-jquery-loading-overlay": "^2.1.7",
        "gmaps": "^0.4.25",
        "intro.js": "^3.2.1",
        "isotope-layout": "^3.0.6",
        "jodit": "^3.5.4",
        "jquery": "^3.5.1",
        "jquery-form": "^4.3.0",
        "jquery-mousewheel": "^3.1.13",
        "jquery-nice-select": "^1.1.0",
        "jquery-parallax": "^1.0.1",
        "jquery-slimscroll": "^1.3.8",
        "jquery-ui-sortable": "^1.0.0",
        "jquery.stellar": "^0.6.2",
        "linearicons": "^1.0.2",
        "magnific-popup": "^1.1.0",
        "moment": "^2.29.0",
        "node-sass": "^4.14.0",
        "owl.carousel": "^2.3.4",
        "perfect-scrollbar": "^1.5.0",
        "places.js": "^1.19.0",
        "popper.js": "^1.16.1",
        "select2": "^4.0.13",
        "sweetalert2": "^10.14.0",
        "symfony-collection": "^2.1",
        "toastr": "^2.1.4",
        "webpack-jquery-ui": "^2.0.1"
    }
}

[bastien70]

That's it I just solved the problem, I don't really know by what miracle.

In fact I created a new project, and installed the dependencies.

Then I saw in the package.json that these versions were needed:

    "devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
        "@symfony/webpack-encore": "^1.0.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "sass": "^1.32.6",
        "sass-loader": "^10.1.1",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },

There are some that did not match my own project's package.json :

"devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets",
        "@symfony/webpack-encore": "^1.0.4",
        "core-js": "^3.8.3",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^9.0.3",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.13.0"
    },

So I just replaced the devDependencies with those from the new project.

Then I ran npm install then npm update, and everything works!

But was the problem really there?

[Lyrkan]

Apart from sass-loader both devDependencies should've matched the same versions when doing a fresh install or a npm update.

My guess is that when you updated @symfony/webpack-encore npm didn't update webpack (that comes with it) for some reason.

[bastien70]

On the other hand, thing to note, when I run npm install --force, I had this warning:

It happened on the new project that I had just created.

And I got the same error on my own project when I finally ran "npm update"
Should we care?

[weaverryan]

Hmm, I wonder if the fact that friendly-errors-webpack-plugin still (incorrectly) has its peer dependency as Webpack v4, but Encore has it at v5, that when you execute Encore (which executes Webpack), it can't figure out which one to use. That must be something specific to how npm works. I think we need to remove friendly-errors-plugin anyways - probably we will just commit it into our project - nobody on that project is even responding to my volunteer to help the repo - geowarin/friendly-errors-webpack-plugin#46 (comment)

Until now, I thought that (apart from a warning), that this was harmless, but it seems that it's not!

[Lyrkan]

Hmm, I wonder if the fact that friendly-errors-webpack-plugin still (incorrectly) has its peer dependency as Webpack v4, but Encore has it at v5, that when you execute Encore (which executes Webpack), it can't figure out which one to use.

I don't think that's the case, peer dependencies are not installed unless you add them yourself. I checked the content of the package.json given above and we were the only lib with webpack as a dependency.

[weaverryan]

Hmm, so maybe what we're seeing in the screenshot above is just npm's version of yarn's "missing peer dependency" warning.

@bastien70 is your project working now (other than this warning)?

[bastien70]

@bastien70 is your project working now (other than this warning)?

Yes everything seems to be working for the moment.

I always have the warning mentioned above, every npm update, that's all.

However, it has happened to me, rarely, for no reason, that the 'npm run dev' gave me an error (I didn't think of raising it, sorry), and that I had to run npm install --force before you can successfully compile the assets again. If I face this problem again, I can share it with you. But for the moment everything seems stable.

On the other hand, a remark. The way we have to manage the copies of images have changed?

In the old days I would require the image in my js file and compiling it the image was automatically placed in public/build/images, but I noticed recently that by doing this now the manifest .json was referencing this image in another way.

For example, if in our app.js file we import a user.jpg image and compile it all, we will have the image that will be available in:

/public/build/images/user [hash] .jpg, but in the manifest.json it will call it this way: build/app.jpg.

While proceeding from webpack with :

     .copyFiles({
         from: './assets/app/images',
         to: 'images/[path][name].[hash:8].[ext]',
         pattern: /\.(png|jpg|jpeg)$/
     })

The manifest.json will correctly reference the image to build/images/user.jpg.

In the past I hadn't noticed this change because my images were cached. It's since the webpack update that I noticed that if I wanted to keep a consistent path if I called my images from Twig, I had to copy the images from webpack. Is this a recent change? Am I totally missing the point?

[weaverryan]

On the other hand, a remark. The way we have to manage the copies of images have changed?

Yes, images are run through the new "asset modules" system - https://webpack.js.org/guides/asset-modules/ - but copyFiles() does not do that. The path change sounds like something that wasn't intended.

[weaverryan]

@bastien70 could you try my fork on #921 (instructions included there) to see if it fixes your manifest.json file?

Thanks!