python-3.x django vue.js webpack django-3.2

Vue code doesn't show up with Webpack Bundle Tracker

I run both the vue and the django. I have installed webpack_loader and have it in installed apps. I have the WEBPACK_LOADER in settings.py

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

frontend is the name when creating vue. Here is some more details KeyError at / 'assets' and ModuleNotFoundError: No module named 'webpack_loader'

My page source from http://localhost:8000/ looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuestionTime</title>
</head>
<body>
    
    <h1>Vue JS</h1>

    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="http://0.0.0.0:8080/bundle.js" ></script>

</body>
</html>

My page source from http://localhost:8080/ looks like this

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>hello-vue</title>
  <link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

When I use (django-webpack-loader 1.0.0), I get KeyError at /

When I use (django_webpack-loader 0.7.0), I get no errors, but the vue code doesn't show up (But I see it at localhost:8080).

Solution

Just started to work Today, I didn't do anything, and it started to work. I tried 2 times to make a new project with the same code, downloaded all the stuff again.

Didn't work. But then my vue code suddenly stopped working. I turned the server on and off. And then I saw that my vue code had been updated. I then went to localhost:8000 to see if it worked, and it did.

I believe that God fixed it. Not sure what else it would be.

EDIT: 8 July 2022

I happened to get the error: TypeError: expected string or bytes-like object.

It was point to {% render_bundle 'chunk-vendors' %}

The problem was that I had upgraded the django-webpack-loader to the latest version, the error went away when I use this version django-webpack-loader==0.6.0.

I tried django-webpack-loader==0.7.0 and it works as well.

The version of webpack-bundle-tracker I'm using is 0.4.3