Missing Script generated by Webpack(development) on first page load-CodePudding

the first time i load the login page the login.js script doesn't load , only the shared.js bundle loads (which has bootstrap js/css and toastr css), if i refresh the page everything loads without problems and after that there are no problems.

Pretty much every time i restart my local server i need refresh the login page to be able to login

my webpack config is as follows

export default {
  entry: {
    shared: [
      './src/3rdparty/bootstrap/bootstrap.min.js',
      './src/3rdparty/bootstrap/bootstrap.min.css',
      './src/3rdparty/toastr/toastr.min.css',
      ],
    login : {
      import: './src/pages/login.js',
      filename: 'main/login.js',
      dependOn: 'shared',
      chunkLoading: false,
    }
  },
  output:{
    path: fileURLToPath(new URL('public',import.meta.url)),
    clean:true,
  },
  resolve:{
    extensions: ['.js']
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
  mode: 'development'
}

The project has been build using Node 16.17 / Expressjs 4

It works without problems if i change the mode to production

CodePudding user response：

Going to write in case i encounter the same issue again:

after adding the compression library i cannot replicate the issue

another issue that i had was that when i was returning messages from the server with the status 400, it would return a invalid string Ex:

{ok:true, description:"username invalid"

always missing the closing bracket }

this issue has also been resolved by using compression middleware