0

So I am working on my react web app with a team. We are all using Git/Gitlab. Everyone was instructed to clone the project using git, and we all did so.

The problem is that when I run the project on VS CODE, I try to edit the file, save the file, and hope to see the changes In real time. But in order for me to see it, I have to turn off the project with Ctrl+C and redo "npm run dev", have it recompile, and then I'll see my changes after a minute.

Everyone else on the other hand can see their changes in real time.

Our file path is..

/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned

(I'm running a linux sub system (ubuntu) as well So we run

npm install AND npm run dev in the above location

Then we run...

npm install AND npm run start

in

/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned(this is the folder I cloned)/server (this is the backend folder)

Full Disclosure, I have been tinkering with VS Code like changing the integrated terminal using WSL, zsh and powerlevel9k extensions. But other than that, I don't see what the problem is.

Addition:

package.json

{
  "name": "react-penny-earned",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npx webpack-dev-server --mode development",
    "build": "npx webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/helper-compilation-targets": "^7.15.4",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "react-hot-loader": "^4.12.19",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "@babel/runtime": "^7.8.3",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.50",
    "@mui/material": "^5.0.2",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^16.12.0",
    "react-google-charts": "^3.0.15",
    "react-icons": "^4.2.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.3.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  }
}

package.json (server)

{
  "name": "react-ecosystems-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npx babel-node src/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "1.19.0",
    "cors": "2.8.5",
    "express": "4.17.1",
    "uuid": "3.3.3"
  },
  "devDependencies": {
    "@babel/core": "7.7.5",
    "@babel/node": "7.7.4",
    "@babel/preset-env": "7.7.6"
  }
}

***Not sure if this should impact anything considering my teammates have the exact same configuration on their system

Webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: { presets: ["@babel/env"] }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: { extensions: ['*', '.js', '.jsx'] },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true,
        historyApiFallback: true,
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};
ZaneK
  • 301
  • 2
  • 14
  • if im not mistaken you need to save the file control+s or command+s to see any quick/hot reload features. you can try tinkering with the settings, maybe you accidentally turned off hot/quick reload – wowza_MAN Nov 09 '21 at 02:10
  • What are the contents of `package.json` (both in the root and in the server folder)? In particular, what are the contents of `scripts.dev` and `scripts.start`? – erwinv Nov 09 '21 at 04:20
  • @erwinv I've pasted the package.json files in my answer, I don't know where to find the scripts.dev and start though – ZaneK Nov 09 '21 at 18:59
  • 1
    @ZaneK `scripts.dev` and `scripts.start` are *paths* in your `package.json`. I see that you are using `webpack-dev-server` to get live reload during development. Kindly share the contents of your `webpack.config.js`. I am guessing it might be related to [this](https://stackoverflow.com/questions/36039146/webpack-dev-server-compiles-files-but-does-not-refresh-or-make-compiled-javascri) but we can't know for sure until we see your Webpack config file. It might also be a Windows related issue (file watching does not work properly) or even your folder location (OneDrive). – erwinv Nov 10 '21 at 01:50
  • @erwinv One webpack.config.json coming right up! (I'll try to experiment with the other factors you mentioned in the meantime) – ZaneK Nov 10 '21 at 05:03
  • The `devServer` `publicPath` in your Webpack config looks wrong. It should only be `/dist/`, not the full URL. – erwinv Nov 10 '21 at 07:45
  • @erwinv So I tried changing it to /dist/, I saved the project, closed and reopened it. Still no difference, and I tried this at a non-OneDrive Path (/mnt/c/Users/major/Documents/penny-earned ). Unfortunately there's no improvement yet. – ZaneK Nov 10 '21 at 14:52
  • @erwinv Still no luck :( – ZaneK Nov 17 '21 at 15:43

0 Answers0