Build adding missing file name in chunk.app

[arslanhashmi]

Getting this error in django while running with DEBUG=False

asset = assets['assets'][chunk]
KeyError: 'css/app.fb0c6e1c.css.map'

This is because build is creating these values in webpack-stats.json:

"status": "done",
  "chunks": {
    "app": [
      "js/chunk-vendors.098df656.js",
      "js/chunk-vendors.098df656.js.map",
      "css/app.fb0c6e1c.css",
      "js/app.c80bf319.js",
      "css/app.fb0c6e1c.css.map",
      "js/app.c80bf319.js.map"
    ]
  },

Out of the above file: css/app.fb0c6e1c.css.map doesn't actually exist.

[fjsj]

Thanks, we'll be checking this tomorrow

[joaopslins]

Hi @arslanhashmi , thanks for opening this issue.

Could you share your webpack configuration, render_bundle template tag usages, and WEBPACK_LOADER Django configuration? So we can understand better what you're trying to do.

[mikkonie]

Hi, just reporting that I've encountered a similar crash in production after upgrading my project to webpack-bundle-tracker 1.0 and the latest django-webpack-loader.

This seems to be caused by non-existing *.css.map files which somehow get listed under chunks.app in webpack-stats.json, but not under assets. Obviously, when django-webpack-loader tries to load one of these files, we get a crash. This is most likely either an error in my webpack config or a bug in webpack-bundle-tracker. I'm trying to figure it out at the moment.

However, as I've understood it, using the IGNORE option in django-webpack-loader should bypass specific files. But even if I have .map files ignored in my config, I still get the crash from that missing *.css.map file. Maybe there's something wrong either in my django-webpack-loader config or there's an actual bug in reading the options?

FWIW, I'm using Python 3.8 with the latest Django 3.2 release. My django-webpack-loader config can be seen below:

WEBPACK_LOADER = {
    'MY-APP': {        
        'STATS_FILE': ROOT_DIR('my-app/webpack-stats.json'),
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
    }
}

Thanks in advance for taking a look at this. I'm definitely not a webpack expert, so please let me know if I'm doing something horribly wrong :)

[arslanhashmi]

Thanks @joaopslins and sorry for late reply, my webpack configurations are very simple:

Inside vue.config.js

devServer: {
    host: '0.0.0.0',
    port: 80,
    disableHostCheck: true
  },

  outputDir: '../my_project/static/frontend',

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    },
    plugins: [
      new BundleTracker({
        path: __dirname,
        filename: '../my_project/static/frontend/webpack-stats.json'
      })
    ]
  },

I had to fork the repo and patch the issue here to have the library working for my project temporarily, but the fix would be highly appreciated.

[fjsj]

Thanks folks, we'll look into this soon.

[mikkonie]

FYI @arslanhashmi: I'm working with Vue as well. One quick workaround to avoid the crash is to simply set productionSourceMap: false in vue.config.js.

As a downside, Chrome will still output warnings about missing .map files. Also this is obviously not an ideal solution if you specifically want to have source map files enabled in production.

[joaopslins]

@arslanhashmi, @mikkonie it seems there's nothing in this vue.config.js there that explicitly adds .map for CSS, maybe this is something that Vue does under the hood. I never used Vue before so I'll take a look at it. In the mean time if you would like to contribute more, it would be helpful to have a minimal Vue project that reproduces the issue, but I'll do my own investigations as well. Thanks.

[fjsj]

@joaopslins regardless of what Webpack produces, the IGNORE config should ignore the map files.

[fjsj]

So there are two problems:

• why webpack-stats.json thinks .map file exists when it doesn't?
• why IGNORE is not ignoring this files?
  • I think the filter_chunks call should be made before trying to resolve the asset:

    django-webpack-loader/webpack_loader/loader.py

    Lines 89 to 94 in ee5a5c6

    	for chunk in chunks:
    	asset = assets['assets'][chunk]
    	if asset is None:
    	raise WebpackBundleLookupError('Cannot resolve asset {0}.'.format(chunk))
    	return self.filter_chunks(chunks)