django webpack django-templates extends django-webpack-loader

Django Template Syntax Error - Django Webpack

I'm working on a django webpack bundle. I got a ready template on github. I made a few changes on it. I prepare for future use according to my own file hierarchy. But I am having a problem with template synxtax. First, there is base.html in my project. Thanks to this page, the background of the pages that I will create in the future is formed. Some files were imported in base.html. These are implemented using render_bundle and static tags. I created a new page to be rendered in django. Likewise, I want to import assets/js/table.js and assets/scss/table.scss files on this page separately from other pages. but I am getting a template syntax error. Where do you think I'm making a mistake?

i got this error

base.html

{% load render_bundle from webpack_loader %}
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    {% block meta %}
      
    {% endblock meta %}
    <title>
        {% block title %}
        
        {% endblock %}
    </title>

    <!-- You should added this tags for production files !!! -->
    {% render_bundle 'app' 'css' %}
    {% render_bundle 'myapp' 'css' %}
    <link href="/media/favicon.png" rel=icon>

    {% block head %}

    {% endblock %}
</head>

<body>
    {% include "navbar.html" %}
    
    <!-- Content -->
    {% block body %}

    {% endblock %}

    <!-- Start -->
    {% if settings.DEBUG and settings.WEBPACK_LIVE_SERVER %}
    <!-- You should added this tags for development files -->
    <script src="{{ settings.WEBPACK_LIVE_SERVER_CONFIG.ADDRESS }}/vendor.bundle.js"></script>
    <script src="{{ settings.WEBPACK_LIVE_SERVER_CONFIG.ADDRESS }}/app.bundle.js"></script>
    <script src="{{ settings.WEBPACK_LIVE_SERVER_CONFIG.ADDRESS }}/myapp.bundle.js"></script>
    {% else %}
    <!-- You should added this tags for production files !!! -->
    {% render_bundle 'vendor' 'js' %}
    {% render_bundle 'app' 'js' %}
    {% render_bundle 'myapp' 'js' %}
    {% endif %}
    <!-- End -->

    {% block scriptblock %}
      
    {% endblock scriptblock %}

    <!-- Your static import javascript modules -->
    <script src="{% static 'new.js' %}"></script>
</body>

</html>

table.html

{% extends "base.html" %}

{% block title %}
Table Test Page
{% endblock title %}

{% block head %}

{% render_bundle 'table' 'css' %}

{% endblock head %}

{% block body %}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, sed.</p>

{% endblock body %}

<!-- Start -->
<!-- Import JS Files for Development and Production -->
{% if settings.DEBUG and settings.WEBPACK_LIVE_SERVER %}
<script src="{{ settings.WEBPACK_LIVE_SERVER_CONFIG.ADDRESS }}/table.bundle.js"></script>
{% else %}
<!-- You should added this tags for production files !!! -->
{% render_bundle 'table' 'js' %}
{% endif %}
<!-- End -->

webpack.common.js

const path = require('path')

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./assets/js/app.js",
    vendor: "./assets/js/vendor.js",
    myapp: "./assets/js/myapp.js",
    table: "./assets/js/table.js",
  },
  module: {
    rules: [{
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs"
          }
        }
      }
    ]
  }
};

webpack.dev.js

const path = require("path");
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin }= require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BundleTracker = require('webpack-bundle-tracker');

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "./assets/bundles/dev"),
    publicPath: "/static/dev/",
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "[name].bundle.css" }),
    new CleanWebpackPlugin(),
    new BundleTracker({path: __dirname, filename: './assets/bundles/dev/stats.json'})
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", //3. Inject styles into DOM
          "css-loader", //2. Turns css into commonjs
          "sass-loader" //1. Turns sass into css
        ]
      }
    ]
  },
  devServer: {
    hot: true,
    compress: true,
    publicPath: '/static/dev/'
  },
});

settings.py

"""
Django settings for app project.

Generated by 'django-admin startproject' using Django 2.2.4.

For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""

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__)))


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

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = ')u)=q2gh%++e1!h(q5*+sa^nn8ygszg=dqfr7a!0ogzleh=i6k'

# 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',

    # Third party apps
    'webpack_loader',
    'crispy_forms',
    'django_extensions'
]

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 = 'app.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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 = 'app.wsgi.application'


# Database
# https://docs.djangoproject.com/en/2.2/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/2.2/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/2.2/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/2.2/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'assets/staticfiles'),
    os.path.join(BASE_DIR, 'static/'),
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/dev/',
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'STATS_FILE': os.path.join(BASE_DIR, 'assets/bundles/dev/stats.json')
    }
}

# Live reload server setting
WEBPACK_LIVE_SERVER = True

if DEBUG and WEBPACK_LIVE_SERVER:
    WEBPACK_LIVE_SERVER_CONFIG = {
        'ADDRESS': 'http://localhost:8080/static/dev'
    }

if not DEBUG:
    WEBPACK_LOADER.update({
        'DEFAULT': {
            # 'BUNDLE_DIR_NAME': 'bundles/',
            'STATS_FILE': os.path.join(BASE_DIR, 'staticfiles/bundles/stats.json')
        }
    })

CRISPY_TEMPLATE_PACK = 'bootstrap4'

# For Media

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")

Solution

In table.html you use the tag render_bundle but you have not loaded those tags (Extending some template that loads those tags does not mean this template can also use them). Load the tags at the start of the template:

{% extends "base.html" %}
{% load render_bundle from webpack_loader %}

<!-- Rest of the template -->
{% render_bundle 'table' 'js' %}
<!-- Rest of the template -->