Gulp doesn't refresh on JS changes

[aadilayub]

I'm using Local by Flywheel, and getting the following error

Hash: 82a1e368990dd1981308
Version: webpack 4.44.1
Time: 9259ms
Built at: 08/04/2020 9:01:24 AM
             Asset      Size  Chunks             Chunk Names
scripts-bundled.js  92.7 KiB     App  [emitted]  App
Entrypoint App = scripts-bundled.js
[./node_modules/@glidejs/glide/dist/glide.esm.js] 78.4 KiB {App} [built]
[./wp-content/themes/fictional-university-theme/css/style.css] 372 bytes {App} [built] [failed] [1 error]
[./wp-content/themes/fictional-university-theme/js/modules/HeroSlider.js] 1000 bytes {App} [built]
[./wp-content/themes/fictional-university-theme/js/modules/MobileMenu.js] 1.45 KiB {App} [built]
[./wp-content/themes/fictional-university-theme/js/scripts.js] 409 bytes {App} [built]

ERROR in ./wp-content/themes/fictional-university-theme/css/style.css 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* 3rd party packages */
> @import "normalize.css";
| @import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css";
| 
 @ ./wp-content/themes/fictional-university-theme/js/scripts.js 1:0-26

[sidikry]

Update your webpack-cli and webpack, like this

npm install --save-dev webpack-cli@latest
npm install --save-dev webpack@latest

And dont forget to install module for style-loader and css-loader

npm install css-loader
npm install style-loader

And Make sure your webpackconfig.js like this,

const path = require('path'),
  settings = require('./settings');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  mode: 'development',
  entry: {
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
}

[CoreyMiller85]

what also needs to be added to this is you will also need to

npm install --save-dev html-webpack-plugin

with the code that sidikry posted, I got it to work on my machine.

[umairmaqbool3]

Js files are not automatically compiling in a gulp. Even the 'gulp scripts' command is giving me the following error:

$ gulp scripts
[12:29:57] Using gulpfile ~\Local Sites\amazingcollege\app\public\gulpfile.js
[12:29:57] Starting 'scripts'...
asset scripts-bundled.js 662 bytes [compared for emit] (name: App)

ERROR in App
Module not found: Error: Can't resolve './public/wp-content/themes/fictional-university-theme/js/scripts.js' in 'C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public'
resolve './public/wp-content/themes/fictional-university-theme/js/scripts.js' in 'C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public'
using description file: C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\package.json (relative path: ./public/wp-content/themes/fictional-university-theme/js/scripts.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\public\wp-content\themes\fictional-university-theme\js\scripts.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\public\wp-content\themes\fictional-university-theme\js\scripts.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\public\wp-content\themes\fictional-university-theme\js\scripts.js.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\public\wp-content\themes\fictional-university-theme\js\scripts.js.wasm doesn't exist
as directory
C:\Users\Junaid Computers\Local Sites\amazingcollege\app\public\public\wp-content\themes\fictional-university-theme\js\scripts.js doesn't exist

webpack 5.56.0 compiled with 1 error in 89 ms
[12:29:58] Finished 'scripts' after 586 ms