Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

why does webpack loader on django and vuejs shows TypeError when using render bundle?

Tags:

django

vue.js

Im trying to work with Django and vuejs using the webpack loader, however I'm running into this template error, Here is the full traceback:

    Environment:


Request Method: GET
Request URL: http://127.0.0.1:8000/

Django Version: 3.0.6
Python Version: 3.7.4
Installed Applications:
['django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 'webpack_loader',
 'topics']
Installed Middleware:
['django.middleware.security.SecurityMiddleware',
 'django.contrib.sessions.middleware.SessionMiddleware',
 'django.middleware.common.CommonMiddleware',
 'django.middleware.csrf.CsrfViewMiddleware',
 'django.contrib.auth.middleware.AuthenticationMiddleware',
 'django.contrib.messages.middleware.MessageMiddleware',
 'django.middleware.clickjacking.XFrameOptionsMiddleware']


Template error:
In template /home/grollier/Projects/Python/bethel/bethel_site/templates/index.html, error at line 21
   **string indices must be integers**
   11 :         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
   12 :     </head>
   13 :     <body>
   14 :         <noscript>
   15 :             <Strong>We're sorry but frontend doesn't work properly without JavaScript enable. Please enable it to continue.</Strong>
   16 :         </noscript>
   17 :         <div id="app">
   18 :             <app></app>
   19 :         </div>
   20 : 
   21 :          {% render_bundle 'app' %} 
   22 : 
   23 :         <!-- built files will be auto injected -->
   24 :     </body>
   25 : </html>

Traceback (most recent call last):
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/core/handlers/exception.py", line 34, in inner
    response = get_response(request)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/core/handlers/base.py", line 145, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/core/handlers/base.py", line 143, in _get_response
    response = response.render()
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/response.py", line 105, in render
    self.content = self.rendered_content
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/response.py", line 83, in rendered_content
    return template.render(context, self._request)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/backends/django.py", line 61, in render
    return self.template.render(context)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/base.py", line 171, in render
    return self._render(context)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/base.py", line 163, in _render
    return self.nodelist.render(context)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/base.py", line 936, in render
    bit = node.render_annotated(context)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/base.py", line 903, in render_annotated
    return self.render(context)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/django/template/library.py", line 192, in render
    output = self.func(*resolved_args, **resolved_kwargs)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/webpack_loader/templatetags/webpack_loader.py", line 12, in render_bundle
    tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/webpack_loader/utils.py", line 64, in get_as_tags
    for chunk in bundle:
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/webpack_loader/loader.py", line 43, in filter_chunks
    for regex in self.config['ignores'])
  File "/home/grollier/anaconda3/envs/bethel/lib/python3.7/site-packages/webpack_loader/loader.py", line 43, in <genexpr>
    for regex in self.config['ignores'])

**Exception Type: TypeError at /
Exception Value: string indices must be integers**

here is my vue.config.js file:

const BundleTracker = require("webpack-bundle-tracker")

module.exports = {
  publicPath: "http://127.0.0.1:8000/",
  outputDir: '.dist/',

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

    config
        .plugin('BundleTracker')
        .use(BundleTracker, [{filename: '../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": ["\*"]})
  },
  pages: {
    app: 'src/main.js'
  },
  "transpileDependencies": [
    "vuetify"
  ]
}

and if it helps here is my setting.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
**TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
FRONTEND_DIR = os.path.join(BASE_DIR, 'frontend')**


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'This-one-is-a-secret'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webpack_loader',
    'topics'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'bethel_site.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATES_DIR, ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'bethel_site.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

**# Webpack configuration thru webpack_loader
WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/',
        'STATS_FILE': os.path.join(FRONTEND_DIR, 'webpack-stats.json'),
        'IGNORE': [r'.+\.hot.update.js', r'.+\.map'],
        'LOADER_CLASS': 'webpack_loader.loader.WebpackLoader'
    }**
}

so Im not sure why I'm running into this TypeError since I followed a tutorial and read the documentation on webpackloader and culdn't find where is the error or where should a correct so it receives the correct type whenever it tries to render the bundle. Any help will be aprecciated. Thanks and cheers.

like image 249
user3762282 Avatar asked Sep 01 '25 22:09

user3762282

1 Answers

I know the answer is a little late, but I've just had the same issue.

You most likely have the latest version of webpack-bundle-tracker installed, which is currently incompatible with the the latest version of django-webpack-loader.

webpack-bundle-tracker is the one that is on alpha release, so you'll need to downgrade that one to v0.4.3. To do this just run:

npm install --save-dev [email protected]

You may need to delete your old webpack-stats.json file to trigger the building of a new one.

Everything should work fine then :) For a fuller discussion you can see this issue: https://github.com/owais/django-webpack-loader/issues/227

like image 166
tim-mccurrach Avatar answered Sep 03 '25 21:09

tim-mccurrach
Sign in to Comment

Related questions

How to properly use django testcase's addCleanup method?
Django: Adding objects to a related set without saving to DB
Equality of Django's Q objects
How to customize username validation
Where are the historical models?
django migrations how to refer to an inner class inside model
BASE_DIR returning settings path and not project path (django 1.10)
Accessing Primary Key from URL in Django View Class
Django app runs locally but I get CSRF verification failed on Heroku
React JSX and Django reverse URL
How to add extra fields to Django Queryset

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!