Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

AlokDev's avatar

Laravel mix with webpack config

In my vue + Laravel project, I have done some webpack config In the webpack.mix.js file. Which is works fine with the yarn package manager. But Npm gives me some errors. While compiling the project `npm run development

 mix

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'fallback'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, ignoreRootsErrors?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, preferAbsolute?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
   -> Options for the resolver
 - configuration.stats has an unknown property 'preset'. These properties are valid:
   object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? }
npm ERR! code ELIFECYCLE
npm ERR! errno 2

Here is my webpack.mix.js file.

const mix = require('laravel-mix')
const path = require('path')
require('vuetifyjs-mix-extension')


const webpack = {
  resolve: {
    alias: {
      '@resources': path.resolve(__dirname, 'resources/'),
      '@': path.resolve(__dirname, 'resources/js/src/'),
      '@themeConfig': path.resolve(__dirname, 'resources/js/themeConfig.js'),
      '@core': path.resolve(__dirname, 'resources/js/src/@core'),
      '@axios': path.resolve(__dirname, 'resources/js/src/plugins/axios.js'),
      '@user-variables': path.resolve(__dirname, 'resources/js/src/styles/variables.scss'),
    },
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      'crypto-browserify': require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    },
  },
}

mix.webpackConfig(webpack)

mix
  .js('resources/js/app.js', 'public/js')
  .vuetify('vuetify-loader', './resources/sass/styles/variables.scss')
  .vue()
  .copyDirectory('resources/js/src/assets/images', 'public/images')

Yarn work perfect. Please help me to solve this issue.

0 likes
3 replies
Sinnbeck's avatar

Try reinstalling node_modules with npm

npm install
//or
npm update
AlokDev's avatar

@Sinnbeck I have removed the node_module and reinstall the package. but it didn't work.

AlokDev's avatar

I have installed the webpack:^5.58.2 and run the npm audit fix and It works.

Thanks!

1 like

Please or to participate in this conversation.