2

I have a react project and I'm using Webpack (webpack-dev-server) for my development.

Everything compiles well, and when I make a change in my file (for the first time), the live reloading works well.

BUT, after changing the same file twice (or more), the live reloading stop working. In the console it says "nothing changed" even when I made a change.

Looks like the webpack-dev-server memory doesn't pick up the change. Any idea why?

Webpack Config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin } = require("webpack");

module.exports = {
  target: "web",
  mode: "development",
  entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
  devtool: "inline-source-map",
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 8080,
    static: "./dist",
    watchFiles: "src/**/*,js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js",
  },

  resolve: { extensions: ["*", ".js", ".jsx"] },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /(node_modules)/,

        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react"],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        // exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      title: "Development",
    }),
    new ProvidePlugin({
      React: "react",
    }),
  ],
};

Package.json

{
  "name": "timerfrontend",
  "version": "1.0.0",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "create": "webpack -w",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "@apollo/client": "^3.5.6",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-hooks": "^4.0.0",
    "@auth0/auth0-react": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "bootstrap": "^5.0.1",
    "dayjs": "^1.10.5",
    "npm-force-resolutions": "^0.0.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.1.1",
    "regenerator-runtime": "^0.13.9",
    "svg-url-loader": "^7.1.1"
  },
  "description": "",
  "resolutions": {
    "react": "17.0.2",
    "graphql": "16.1.0"
  }
}
Dom355
  • 171
  • 2
  • 15
  • Possible duplicate: [Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser](https://stackoverflow.com/questions/36039146/webpack-dev-server-compiles-files-but-does-not-refresh-or-make-compiled-javascri) – laggingreflex Jun 01 '22 at 09:56

4 Answers4

2

I found the solution (hint: its weird)

I realized that my Webpack live reloading was working on my other components (except the I had issue with).

I finally resolved to deleting that component and create a new one (exact copy) and then it worked perfectly!?

I still don't know why Webpack didn't like this component specifically...

Dom355
  • 171
  • 2
  • 15
  • I encountered the same problem and it can only be solved by create a new file and copy-paste code into it. I tried renaming the old file but it didn't work. Do you figure out the the reason? – LCB Aug 22 '22 at 13:20
  • Not sure but I suspect its because I changed the name of the file after creating it. Its not supposed to create an error but somehow it did - and Webpack didn't read it properly thereafter. – Dom355 Aug 25 '22 at 00:29
2

It was happening to me, I checked the files and class names, they have to be exactly the same, including caps and lowercase letters

Misael Lopez
  • 21
  • 1
  • This answer should get more votes! It's not great that webpack requires this, it forces you to change the packaging of the app. :-\ Thank you for the nice answer! – Midiman Dec 14 '22 at 20:17
1

In my case, the file I was modified is not being use anywhere in project, so webpack does not recognize it. After import and use it in the code, then it work fine

Quan Phan
  • 11
  • 1
  • 1
    This is a comment rather than an answer, please take a look at https://meta.stackoverflow.com/questions/297066/meta-meta-stack-overflow-when-should-i-answer-or-comment. Please also look at see https://stackoverflow.com/help/how-to-answer – jv-k Jan 17 '23 at 04:49
1

Yep I've had this issue before, it was caused by creating a file with Pascal case ex. MyComponent.jsx, then renaming it or recreating the same file as mycomponent.jsx.

Tmorse01
  • 11
  • 1