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

This solved my problem:

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

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”.

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.

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?

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.

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

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?