0

I have been trying to integrate React to a Django app using Babel and Webpack, but am having a hard time running the updated .js output file.

I believe my problem comes from the main.js file Webpack outputs does not reflect the updated come from my React components. What I mean by that is that my server does not load the main.js file with the updated code when I refresh the page .

What happens is that when I refresh the page only this runs on my python terminal (most of the time): [20/Apr/2021 22:01:02] "GET / HTTP/1.1" 200 1509. While sometimes my static files run too, but that seems to be random: [20/Apr/2021 22:00:20] "GET /%20static%20/frontend/main.js HTTP/1.1" 304 0. So what is happening is that the python server is rarely running GET for the static files when I refresh the page. I would like to understand why this happens and how I can fix it.

Here is my folder structure:

  • dist
    • bundle.js
      • main.js
  • src
    • components
      • index.js
  • static
    • frontend
      • main.js
  • templates
    • frontend
      • index.html
  • babel.config.json
  • package.json
  • webpack.config.js

Here is my code:

index.js -

import App from "./components/App/App";

index.html

<!DOCTYPE html>
<html>
    <head>
        {% load static %}
        <link rel="icon" href="{% static 'imgs/acmLogo.ico' %}" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>ACM</title>
        <!-- link to css file -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" />
        
    </head>
    <body>
        <div id="main">
            <div id="app"></div>
        </div>

        <script src="{% static 'frontend/main.js' %}"></script>
    
    </body>
</html>

babel.config.json

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "10"
          }
        }
      ],
      "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties"]
  }

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --watch --mode development",
    "server": "webpack-dev-server",
    "start": "react-scripts start",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "webpack": "^5.34.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV' : JSON.stringify('development')
        // This has effect on the react lib size
    }),
  ],
};
Gui
  • 11
  • 4
  • This could be a django issue where the django dev server is serving a cached version of the view. You can try adding a never cache decorator to your django view function and if that solves the issue then you know it's not a webpack error. You can also try opening up a private browser and check if django serves the updated view there. – Brandon.G Apr 21 '21 at 20:38
  • Whenever I open the website on a new browser, the updated code is outputted, but not on page refreshes. I tried adding a never cache decorator but that didn't seem to make a difference. – Gui Apr 21 '21 at 23:16

0 Answers0