Exception Value: string indices must be integers : Render bundle error vue + django

Question

im using webpack loader to inyect my vue app into django, here is the code:

Settings :

WEBPACK_LOADER = {
'DEFAULT':{
    'BUNDLE_DIR_NAME':'/',
    'STATS_FILE':os.path.join(BASE_DIR,'aptim-frontend/dist','webpack-stats.json')

}}

vue config file :

const BundleTracker = require("webpack-bundle-tracker"); 
module.exports = {
  // on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
  publicPath: "http://0.0.0.0:8080/",
  outputDir: "./dist/",

  chainWebpack: (config) => {
    config.optimization.splitChunks(false);

config
  .plugin("BundleTracker")
  .use(BundleTracker, [{ filename: "../frontend/webpack-stats.json" }]);

config.resolve.alias.set("__STATIC__", "static");

config.devServer
  .public("http://0.0.0.0:8080")
  .host("0.0.0.0")
  .port(8080)
  .hotOnly(true)
  .watchOptions({ poll: 1000 })
  .https(false)
  .headers({ "Access-Control-Allow-Origin": ["*"] });},};

And the html line where I get the error is at the index html

 {% render_bundle 'app' %}

ERROR :Exception Value: string indices must be integers

Answer 1

I had the same issue in the great Udemy course The Complete Guide to Django REST Framework and Vue JS. You probably cannot read the answer from Michele Saba if you are not subscribed.

It probably has something to do with the package versions and them being alpha. Downgrading to

• [email protected]
• django-webpack-loader==0.7.0

worked for me. Downgrade using:

npm install --save-dev [email protected]

Answer 2

Downgrade Webpack-bundle-tracker as told by @Frans

npm install --save-dev [email protected]

In vue.config.js

config
    .plugin('BundleTracker')
    .use(BundleTracker, [{filename: './webpack-stats.json'}])

Then delete the dist folder with the old webpack-stats.json

In this version and with this config webpack-stats.json file is generated in frontend not in frontend/dist So you must change STATS_FILE in settings.py (for example if your Vue project is frontend)

'STATS_FILE': os.path.join(BASE_DIR, 'frontend','webpack-stats.json'),

Then restart Vue and Django web-servers.