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 - https://github.com/geowarin/friendly-errors-webpack-plugin/issues/46#issuecomment-766374259

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 --forcebefore 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!

[bastien70]

Hey @weaverryan ! I have tried this. Are you asking me to run the two commands described on my project to check my problem above? If so, then here are the results of this test:

I first tested on a very recent project. I updated the dependencies first before placing your orders. Everything went well. However, at the time of run npm run dev, I got this error (the same as for the original subject, but on another project where webpack had successfully installed yet):

So I created a brand new project to test. Everything went well.

When running npm run dev, here are the results against themanifest.json:

It's much better ! I had put an image in /assets/images/myImage.jpg and I require it in my app.js.

After compilation, here is what the manifest.json gives:

{
  "build/app.css": "/build/app.css",
  "build/app.js": "/build/app.js",
  "build/runtime.js": "/build/runtime.js",
  "build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-28f194.js": "/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-28f194.js",
  "build/assets/images/myImage.jpg": "/build/images/myImage.a375e619.jpg"
}

[weaverryan]

Hey @bastien70!

Please try version 1.0.6 and let me know if you have any more issues.

Btw, the first error above - about "Invalid configuration object" - is your project, once again (somehow) reverting back to Webpack 4 :/. Fun(ish) fact, in fixing this manifest.json issue, I was delayed a few days with a Windows+npm bug where it would not resolve some dependencies correctly. Your probably not hitting the same thing, but it's interesting that npm isn't behaving correctly for you also.

Cheers!

[GuidovdRiet]

Hi! I'm running into this exact same issue.

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].oneOf[1].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.

Webpack Config

const Encore = require('@symfony/webpack-encore');
const 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
  .setOutputPath('public/build/')
  .setPublicPath('/build')

  .addEntry('react', './frontend/js/App.tsx')

  .splitEntryChunks()

  .enableSingleRuntimeChunk()

  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

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

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

  // uncomment if you use TypeScript
  .enableTypeScriptLoader()
  .enableForkedTypeScriptTypesChecking()
  .enableEslintLoader((options) => {
    options.parser = '@typescript-eslint/parser';
  })
  .configureLoaderRule('eslint', (loader) => {
    loader.test = /\.(jsx?|tsx?)$/;
  })
  // Comes with rule to exclude node_modules from compiling, turned off so ui-components will be compiled
  .configureLoaderRule('typescript', (rule) => {
    delete rule.exclude;
  })

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

  // define the environment variables
  .configureDefinePlugin((options) => {
    const env = dotenv.config();

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

    // Set client ID .env file
    options['process.env'].REACT_APP_CLIENT_ID = JSON.stringify(
      env.parsed.REACT_APP_CLIENT_ID
    );

    // Set client ID .env file
    options['process.env'].REACT_APP_CLIENT_SECRET = JSON.stringify(
      env.parsed.REACT_APP_CLIENT_SECRET
    );
  })

  // uncomment if you use API Platform Admin (composer require api-admin)
  .enableReactPreset();

const config = Encore.getWebpackConfig();

// Change the kind of source map generated in
// development mode
if (!Encore.isProduction()) {
  config.devtool = 'cheap-module-source-map';
}

// Forces error overlay
config.devServer = {
  overlay: {
    errors: true,
    warnings: false,
  },
};

module.exports = config;

Package.json

"@symfony/webpack-encore": "^1.1.2",
"eslint-plugin-react": "^7.21.4",
 "eslint-plugin-react-hooks": "^4.1.2",
 "fork-ts-checker-webpack-plugin": "^6.1.0",

// react
"react": "^17.0.1",
"react-dom": "^17.0.1",

When I install Webpack("webpack": "^5.24.2") as a dev dependency the build is successful. After this install, I get the following error: Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues.

[ariclinis]

This solved my problem:

yarn add webpack@4 
  yarn add webpack-cli
  yarn add @rails/webpacker
  bundle exec rails webpacker:install

[tonybob-tl]

Here is how I fixed the problem.

Run npm list webpack. I got something like this:

my_project@ /home/me_user/Projects/my_project_files ├─┬ @symfony/webpack-encore@1.6.1 │ ├─┬ @nuxt/friendly-errors-webpack-plugin@2.5.1 │ │ └── webpack@4.46.0 deduped │ ├─┬ assets-webpack-plugin@7.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ babel-loader@8.2.2 │ │ └── webpack@4.46.0 deduped │ ├─┬ clean-webpack-plugin@3.0.0 │ │ └── webpack@4.46.0 deduped │ ├─┬ css-loader@5.2.7 │ │ └── webpack@4.46.0 deduped │ ├─┬ css-minimizer-webpack-plugin@2.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ mini-css-extract-plugin@1.6.2 │ │ └── webpack@4.46.0 deduped │ ├─┬ style-loader@2.0.0 │ │ └── webpack@4.46.0 deduped │ ├─┬ terser-webpack-plugin@5.2.4 │ │ └── webpack@5.52.1 deduped │ ├─┬ webpack-cli@4.8.0 │ │ ├─┬ @webpack-cli/configtest@1.0.4 │ │ │ └── webpack@4.46.0 deduped │ │ └── webpack@4.46.0 deduped │ ├─┬ webpack-dev-server@4.2.0 │ │ ├─┬ webpack-dev-middleware@5.1.0 │ │ │ └── webpack@4.46.0 deduped │ │ └── webpack@4.46.0 deduped │ └── webpack@5.52.1 ├─┬ dotenv-flow-webpack@1.1.0 │ └─┬ webpack@4.46.0 │ └─┬ terser-webpack-plugin@1.4.5 │ └── webpack@4.46.0 deduped ├─┬ sass-loader@10.2.0 │ └── webpack@4.46.0 deduped └─┬ workbox-webpack-plugin@6.3.0 └── webpack@4.46.0 deduped

Two different versions of webpack are listed. npm couldn't resolve the conflict and used both (?). To resolve the conflict, use this list and uninstall all of the packages that depend on webpack. From above, for me, these included @symfony/webpack-encore@1.6.1; dotenv-flow-webpack@1.1.0; sass-loader@10.2.0; and workbox-webpack-plugin@6.3.0. For you, it will be different, but probably the encore will have the most dependencies. Whatever you do, MAKE SURE YOU KEEP A LIST OF THESE PACKAGES!!!

After doing this, make sure you no longer have webpack installed anywhere by running the npm list webpack again.

my_project@ /home/me_user/Projects/my_project_files └── (empty)

Then install webpack with npm install webpack. This should give you the latest version. Check it npm list webpack.

my_project@ /home/me_user/Projects/my_project_files └─┬ webpack@5.52.1 └─┬ terser-webpack-plugin@5.2.4 └── webpack@5.52.1 deduped

Then reinstall all the packages you removed. All of the packages accepted the latest version of webpack except one: dotenv-flow-webpack@1.1.0. For that I ran npm install dotenv-flow-webpack --force. This gave me errors, but it still installed and everything still worked fine. Instead of using force, you might be able to find an alternative package that allows webpack version 5+.

my_project@ /home/me_user/Projects/my_project_files ├─┬ @symfony/webpack-encore@1.6.1 │ ├─┬ @nuxt/friendly-errors-webpack-plugin@2.5.1 │ │ └── webpack@5.52.1 deduped │ ├─┬ assets-webpack-plugin@7.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ babel-loader@8.2.2 │ │ └── webpack@5.52.1 deduped │ ├─┬ clean-webpack-plugin@3.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ css-loader@5.2.7 │ │ └── webpack@5.52.1 deduped │ ├─┬ css-minimizer-webpack-plugin@2.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ mini-css-extract-plugin@1.6.2 │ │ └── webpack@5.52.1 deduped │ ├─┬ style-loader@2.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ terser-webpack-plugin@5.2.4 │ │ └── webpack@5.52.1 deduped │ ├─┬ webpack-cli@4.8.0 │ │ ├─┬ @webpack-cli/configtest@1.0.4 │ │ │ └── webpack@5.52.1 deduped │ │ └── webpack@5.52.1 deduped │ ├─┬ webpack-dev-server@4.2.0 │ │ ├─┬ webpack-dev-middleware@5.1.0 │ │ │ └── webpack@5.52.1 deduped │ │ └── webpack@5.52.1 deduped │ └── webpack@5.52.1 deduped ├─┬ dotenv-flow-webpack@1.1.0 │ └── webpack@5.52.1 deduped invalid ├─┬ sass-loader@10.2.0 │ └── webpack@5.52.1 deduped ├── webpack@5.52.1 └─┬ workbox-webpack-plugin@6.3.0 └── webpack@5.52.1 deduped

npm ERR! code ELSPROBLEMS npm ERR! invalid: webpack@5.52.1 /home/me_user/Projects/my_project_files/node_modules/webpack

npm ERR! A complete log of this run can be found in: npm ERR! /home/trent/.npm/_logs/2021-09-10T15_57_57_679Z-debug.log

Again, those errors came from forcing dotenv-flow-webpack to use version 5 of webpack. However, it still worked fine (so far...).

UPDATE: In my case, a version of webpack is built in with @symfony/webpack-encore. If you install webpack separately it will conflict with the version that is installed with @symfony/webpack-encore. In this case, simply install @symfony/webpack-encore FIRST before installing all the other packages that require webpack. When you do this, npm will use @symfony/webpack-encore's version of webpack for the other packages. AGAIN, use the force command as indicated above for any packages that may require an older version of webpack. It might work. If it doesn't, then try to find a substitute that will work with the later version of webpack.

[siavashsajady]

Here is a great tool to make configuring your Webpack easy. Enjoy playing with it! https://web.jakoblind.no/webpack-config/

[chriskemboi]

@

Here is a great tool to make configuring your Webpack easy. Enjoy playing with it! https://web.jakoblind.no/webpack-config/

Here is how I fixed the problem.

Run npm list webpack. I got something like this:

my_project@ /home/me_user/Projects/my_project_files ├─┬ @symfony/webpack-encore@1.6.1 │ ├─┬ @nuxt/friendly-errors-webpack-plugin@2.5.1 │ │ └── webpack@4.46.0 deduped │ ├─┬ assets-webpack-plugin@7.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ babel-loader@8.2.2 │ │ └── webpack@4.46.0 deduped │ ├─┬ clean-webpack-plugin@3.0.0 │ │ └── webpack@4.46.0 deduped │ ├─┬ css-loader@5.2.7 │ │ └── webpack@4.46.0 deduped │ ├─┬ css-minimizer-webpack-plugin@2.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ mini-css-extract-plugin@1.6.2 │ │ └── webpack@4.46.0 deduped │ ├─┬ style-loader@2.0.0 │ │ └── webpack@4.46.0 deduped │ ├─┬ terser-webpack-plugin@5.2.4 │ │ └── webpack@5.52.1 deduped │ ├─┬ webpack-cli@4.8.0 │ │ ├─┬ @webpack-cli/configtest@1.0.4 │ │ │ └── webpack@4.46.0 deduped │ │ └── webpack@4.46.0 deduped │ ├─┬ webpack-dev-server@4.2.0 │ │ ├─┬ webpack-dev-middleware@5.1.0 │ │ │ └── webpack@4.46.0 deduped │ │ └── webpack@4.46.0 deduped │ └── webpack@5.52.1 ├─┬ dotenv-flow-webpack@1.1.0 │ └─┬ webpack@4.46.0 │ └─┬ terser-webpack-plugin@1.4.5 │ └── webpack@4.46.0 deduped ├─┬ sass-loader@10.2.0 │ └── webpack@4.46.0 deduped └─┬ workbox-webpack-plugin@6.3.0 └── webpack@4.46.0 deduped

Two different versions of webpack are listed. npm couldn't resolve the conflict and used both (?). To resolve the conflict, use this list and uninstall all of the packages that depend on webpack. From above, for me, these included @symfony/webpack-encore@1.6.1; dotenv-flow-webpack@1.1.0; sass-loader@10.2.0; and workbox-webpack-plugin@6.3.0. For you, it will be different, but probably the encore will have the most dependencies. Whatever you do, MAKE SURE YOU KEEP A LIST OF THESE PACKAGES!!!

After doing this, make sure you no longer have webpack installed anywhere by running the npm list webpack again.

my_project@ /home/me_user/Projects/my_project_files └── (empty)

Then install webpack with npm install webpack. This should give you the latest version. Check it npm list webpack.

my_project@ /home/me_user/Projects/my_project_files └─┬ webpack@5.52.1 └─┬ terser-webpack-plugin@5.2.4 └── webpack@5.52.1 deduped

Then reinstall all the packages you removed. All of the packages accepted the latest version of webpack except one: dotenv-flow-webpack@1.1.0. For that I ran npm install dotenv-flow-webpack --force. This gave me errors, but it still installed and everything still worked fine. Instead of using force, you might be able to find an alternative package that allows webpack version 5+.

my_project@ /home/me_user/Projects/my_project_files ├─┬ @symfony/webpack-encore@1.6.1 │ ├─┬ @nuxt/friendly-errors-webpack-plugin@2.5.1 │ │ └── webpack@5.52.1 deduped │ ├─┬ assets-webpack-plugin@7.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ babel-loader@8.2.2 │ │ └── webpack@5.52.1 deduped │ ├─┬ clean-webpack-plugin@3.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ css-loader@5.2.7 │ │ └── webpack@5.52.1 deduped │ ├─┬ css-minimizer-webpack-plugin@2.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ mini-css-extract-plugin@1.6.2 │ │ └── webpack@5.52.1 deduped │ ├─┬ style-loader@2.0.0 │ │ └── webpack@5.52.1 deduped │ ├─┬ terser-webpack-plugin@5.2.4 │ │ └── webpack@5.52.1 deduped │ ├─┬ webpack-cli@4.8.0 │ │ ├─┬ @webpack-cli/configtest@1.0.4 │ │ │ └── webpack@5.52.1 deduped │ │ └── webpack@5.52.1 deduped │ ├─┬ webpack-dev-server@4.2.0 │ │ ├─┬ webpack-dev-middleware@5.1.0 │ │ │ └── webpack@5.52.1 deduped │ │ └── webpack@5.52.1 deduped │ └── webpack@5.52.1 deduped ├─┬ dotenv-flow-webpack@1.1.0 │ └── webpack@5.52.1 deduped invalid ├─┬ sass-loader@10.2.0 │ └── webpack@5.52.1 deduped ├── webpack@5.52.1 └─┬ workbox-webpack-plugin@6.3.0 └── webpack@5.52.1 deduped

npm ERR! code ELSPROBLEMS npm ERR! invalid: webpack@5.52.1 /home/me_user/Projects/my_project_files/node_modules/webpack

npm ERR! A complete log of this run can be found in: npm ERR! /home/trent/.npm/_logs/2021-09-10T15_57_57_679Z-debug.log

Again, those errors came from forcing dotenv-flow-webpack to use version 5 of webpack. However, it still worked fine (so far...).

UPDATE: In my case, a version of webpack is built in with @symfony/webpack-encore. If you install webpack separately it will conflict with the version that is installed with @symfony/webpack-encore. In this case, simply install @symfony/webpack-encore FIRST before installing all the other packages that require webpack. When you do this, npm will use @symfony/webpack-encore's version of webpack for the other packages. AGAIN, use the force command as indicated above for any packages that may require an older version of webpack. It might work. If it doesn't, then try to find a substitute that will work with the later version of webpack.

Hi Could you help me how I can uninstall all dependencing

larav_API@ C:\Laravel\larav_API
├─┬ laravel-mix@6.0.43 │ ├─┬ babel-loader@8.2.3 │ │ └── webpack@4.46.0 deduped
│ ├─┬ css-loader@5.2.7 │ │ └── webpack@4.46.0 deduped
│ ├─┬ file-loader@6.2.0 │ │ └── webpack@4.46.0 deduped
│ ├─┬ html-loader@1.3.2 │ │ └── webpack@4.46.0 deduped
│ ├─┬ mini-css-extract-plugin@1.6.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ postcss-loader@6.2.1 │ │ └── webpack@5.69.1 deduped
│ ├─┬ style-loader@2.0.0 │ │ └── webpack@4.46.0 deduped
│ ├─┬ terser-webpack-plugin@5.3.1
│ │ └── webpack@5.69.1 deduped
│ ├─┬ webpack-cli@4.9.2 │ │ ├─┬ @webpack-cli/configtest@1.1.1 │ │ │ └── webpack@4.46.0 deduped
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-dev-server@4.7.4
│ │ ├─┬ webpack-dev-middleware@5.3.1 │ │ │ └── webpack@4.46.0 deduped
│ │ └── webpack@4.46.0 deduped
│ ├── webpack@5.69.1 │ └─┬ webpackbar@5.0.2 │ └── webpack@4.46.0 deduped
└─┬ sass-loader@7.3.1 └─┬ webpack@4.46.0 └─┬ terser-webpack-plugin@1.4.5
└── webpack@4.46.0 deduped

I have used NPM uninstall but i didn't work

[Abhishek-surveyheart]

This solved my problem: npm add webpack@4

[drummer73]

Sorry to say, but IMHO this isn't solved yet.

lib/config-generator.js line 252 defines the property "assetModuleFilename" which is stated as "invalid config object".

[Rutvik17]

I having this issue, I am doing a course on developing creative website from scratch without using any frameworks and following the instructors code but he is using webpack: 4.*.* and I am on webpack: 5.75.* which is the latest stable version.

Can someone please help tell what's wrong with my webpack.config file?

error

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node should be false.
    * configuration.node should be an object:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.

here is my webpack.config.js

const path = require('path')
const webpack = require('webpack')

const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev'

const dirApp = path.join(__dirname, 'src')
const dirShared = path.join(__dirname, 'shared')
const dirStyles = path.join(__dirname, 'styles')
const dirNode = 'node_modules'

module.exports = {
    node: false,
    entry: [
        path.join(dirApp, 'index.js'),
        path.join(dirStyles, 'index.scss')
    ],

    // https://webpack.js.org/configuration/resolve/
    resolve: {
        modules: [
            dirApp,
            dirShared,
            dirStyles,
            dirNode
        ],
    },

    plugins: [
        new webpack.DefinePlugin({
            // Definitions...
            IS_DEVELOPMENT
        }),

        new CopyWebpackPlugin({
            patterns: [
                {
                    from: './shared',
                    to: ''
                }
            ]
        }),

        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),

        new ImageMinimizerPlugin({
            minimizer: {
                implementation: ImageMinimizerPlugin.imageminMinify,
                options: {
                    // Lossless optimization with custom option
                    // Feel free to experiment with options for better result for you
                    plugins: [
                        ["gifsicle", { interlaced: true }],
                        ["jpegtran", { progressive: true }],
                        ["optipng", { optimizationLevel: 1 }]
                    ],
                },
            },
        }),

        new NodePolyfillPlugin(),
    ],

    module: {
        rules: [
            {
                // regular expression
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: ''
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },

            {
                test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
                loader: 'file-loader',
                options: {
                    name (file) {
                        return '[contenthash].[ext]'
                    }
                }
            },

            {
                test: /\.(jpe?g|png|gif|svg|webp)$/i,
                use: [
                    {
                        loader: ImageMinimizerPlugin.loader,
                        options: {
                            minimizer: {
                                implementation: ImageMinimizerPlugin.imageminMinify,
                                options: {
                                    plugins: [
                                        "imagemin-gifsicle",
                                        "imagemin-mozjpeg",
                                        "imagemin-pngquant",
                                    ],
                                },
                            },
                        },
                    },
                ],
            },
        ]
    }
}

package.json

{
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack --progress --config webpack.config.build.js",
    "development": "webpack serve --progress --config webpack.config.development.js",
    "start": "npm run development"
  },
  "devDependencies": {
    "babel-loader": "^9.1.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "image-minimizer-webpack-plugin": "^3.8.1",
    "imagemin": "^8.0.1",
    "mini-css-extract-plugin": "^2.7.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "postcss-loader": "^7.0.2",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  }
}

[adsazad]

Worked for me after deleting node_modules and package-lock.json and reinstalling it with npm install --legacy-peer-deps.

[LucasArruda]

thanks @tonybob-tl npm list webpack saved the day

Found it was loading v4 and v5 of webpack

├─┬ @rails/webpacker@6.0.0-rc.6
│ ├─┬ babel-loader@8.4.1
│ │ └── webpack@5.95.0 deduped
│ ├─┬ compression-webpack-plugin@9.2.0
│ │ └── webpack@5.95.0 deduped
│ ├─┬ terser-webpack-plugin@5.3.10
│ │ └── webpack@5.95.0
│ ├─┬ webpack-assets-manifest@5.2.1
│ │ └── webpack@5.95.0 deduped
│ └── webpack@5.95.0
├─┬ webpack-cli@4.10.0
│ ├─┬ @webpack-cli/configtest@1.2.0
│ │ └── webpack@5.95.0
│ └── webpack@4.47.0 deduped
├─┬ webpack-dev-server@4.15.2
│ ├─┬ webpack-dev-middleware@5.3.4
│ │ └── webpack@4.47.0 deduped
│ └── webpack@4.47.0 deduped
└─┬ webpack@4.47.0
  └─┬ terser-webpack-plugin@1.4.6
    └── webpack@4.47.0 deduped

Moving to webpack@5.95.0 from webpack@4.47.0 on package.json did it for me!