Webpack 5 live reload

Question

I updated webpack 4 to webpack 5, after which everything works, except for updating the browser (live reload) who can tell the reason? here is my config.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

module.exports = (env, argv) => {
  const { mode = 'development' } = argv;
  const isProd = mode === 'production';
  const isDev = mode === 'development';

  const getStyleLoaders = () => {
    return [isProd ? MiniCssExtractPlugin.loader : 'style-loader'];
  };
  return {
    context: path.resolve(__dirname, 'src'),
    mode: isProd ? 'production' : isDev && 'development',
    entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isDev ? 'script/script.js' : 'script/bundle-[hash:8].js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.js'],
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      publicPath: '/',
      open: true,
      watchContentBase: true,
      port: 8080,
    },
    devtool: isProd ? false : 'source-map',
  };
};

Answer 1

You need to set {target: 'web'} in your Webpack config and also make sure to run your dev server like this: webpack serve --mode development --env development

Answer 2

live reload will only work if the webpack bundle target is 'web', so adding this line to webpack.config will make it work:

target: 'web'

Still, for the time this is being written, there is a bug in webpack-dev-server@3 that prevents live reload when target is an array that contains 'web': https://github.com/webpack/webpack-dev-server/pull/3271

so you can't do that:

target: ['web', 'es5']

maybe one can use this workaround...

target: isProduction ? ['web', 'es5'] : 'web'

Answer 3

I am not sure if this could be related to your problem, but what version of webpack-cli are you using? Some are reporting this problem with webpack-dev-server due to webpack-cli v4.0.0:

Error: Cannot find module 'webpack-cli/bin/config-yargs' #2759

If you are having this problem, you could try downgrading webpack-cli to version: 3.3.0 (exact) and webpack-dev-server down to version: ^3.11.0.

Answer 4

I had the same problem with webpack v5.39.0, webpack-cli v4.7.2 webpack-dev-server v3.11.2 My way:

npm install -D [email protected]

module.exports ={target: "web"} in config

and "start": "webpack serve" in package.json

Answer 5

i had same error this is what fixed it:

first

setting {target: 'web'} in the Webpack config

second

under devServer config set: publicPath: "/assets/",

my config will:

    module.exports = {
    target: “web”,
    entry: {
    main: path.resolve(__dirname, “./src/index.js”)
    },
    output: {
    path: __dirname + “/dist/assets”,
    filename: “bundle.js”,
    publicPath: “assets”
    },
    mode: “development”,
    devServer: {
    open: true,
    contentBase: “./dist”,
    publicPath: “/assets/”,
    port: 3000,
    hot: false,
    watchContentBase: true
    }}

Answer 6

I had the same error. Here's how I solved it.

1. Add { target: 'web' }
2. Add { devServer: { hot: false, watchContentBase: true }}
3. Remove { devServer: { historyApiFallback: true }}
4. Result:

module.exports = {
  mode: 'development',
  target: 'web',
  entry: './src/app/main.ts',
  output: {
    path: paths.dist,
    filename: 'js/main.min.js?[fullhash]',
  },
  devServer: {
    open: true,
    overlay: true,
    contentBase: paths.dist,
    port: 8080,
    host: '0.0.0.0',
    hot: false,
    watchContentBase: true,
  }
}

Start script:

"scripts": {
  "dev": "webpack serve --mode development",
}

Start command:

 npm run dev

My default browser open automatically on http://localhost:8080

When I edit my pug file, I see the result in browser.

Answer 7

I was facing the same issue with webpack-dev-server v4.8.1 and this worked for me:-

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    open:true,
    compress: true,
    port: 9000,
    hot:false
 },

Answer 8

I found this solution in the official documentation: devserverwatchfiles

Use devServer.watchFiles

This option allows you to configure a list of globs/directories/files to watch for file changes.

For example:

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*'],
  },
};

Answer 9

for webpack 5 you need to add static key to path where your app source code lies

devServer: {
    open: true,
    hot: true,
    static: {
      directory: path.join(__dirname, "src"),
    },
  },

Answer 10

How about using events end returning promise?

const { parse } = require('csv-parse');
const fs = require('fs');
const csvFile = 'myCsvFile.csv';

async function parseCsv(csvFile) {
  return new Promise((resolve) => {
    const records = [];
    const stream = fs.createReadStream(csvFile);
    const parser = stream.pipe(parse({ delimiter: ',', columns: true }));
    
    parser.on('readable', () => {
      while (record = parser.read()) {
        records.push(record);
      }
    });

    let ended = false;
    const end = (error) => {
      if (error) {
        console.error(error.message);
      }

      if (!ended) {
        ended = true;
        resolve(records);
      }
    };

    parser.on('error', end);
    parser.on('end', end);
  });
}

also if You have node 15+ then try stream/promises example:

const { parse } = require('csv-parse');
const fs = require('fs');
const { finished } = require('stream/promises');
const csvFile = 'myCsvFile.csv';

async function parseCsv(csvFile) {
    const records = [];
    const stream = fs.createReadStream(csvFile);
    const parser = stream.pipe(parse({ delimiter: ',', columns: true }));

    parser.on('readable', () => {
      let record;
      while ((record = parser.read()) !== null) {
        records.push(record);
      }
    });

    await finished(parser);

    return records;
}

Answer 11

Based on advice given in the answers, I am going to ignore the Airbnb Style Guide and use the Async iterator method.

Final code:

const { parse } = require('csv-parse');
const fs = require('fs');
const path = require('path');
const debug = require('debug')('app:csv:service');
const chalk = require('chalk');

async function parseCsv(csvFile) {
  try {
    const records = [];
    const stream = fs.createReadStream(csvFile);
    const parser = stream.pipe(parse({ delimiter: ',', columns: true }));
    // eslint-disable-next-line no-restricted-syntax
    for await (const record of parser) {
      records.push(record);
    }
    return records;
  } catch (error) {
    debug(`${chalk.red('Failed')} to parse CSV`);
    debug(`${chalk.red('ERROR:')} ${error}`);
    throw error;
  }
}

It may be time to find a new Style Guide to follow. Thank you to num8er for the code advice (I took one of your ideas to make my code a little more readable).