⠦ [Webpack] Watch service... Console (animation) cuts out console.log strings

[naretini]

Bug report

What is the current behavior? I'm using webpack (watch mode enabled) along with serverless framework and serverless-offline, serverless-webpack plugins Runtime Nodejs w/ Typescript.

If the current behavior is a bug, please provide the steps to reproduce. When I test locally my serverless app executing on console: sls offline start

I see the following webpack watcher message(animation) on the console: ⠦ [Webpack] Watch service... ( dots are animated )

While the app is running and I starts logging, webpack watch service message might refresh

When webpack watch is polling this message will overwrite last lines on my console logs. Preventing me to see latest information.

Following is my webpack.config.js file:

const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  context: __dirname,
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  entry: slsw.lib.entries,
  devtool: slsw.lib.webpack.isLocal ? 'cheap-module-source-map' : 'source-map',
  resolve: {
    extensions: ['.mjs', '.json', '.ts'],
    symlinks: false,
    cacheWithContext: false,
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(tsx?)$/,
        loader: 'ts-loader',
        exclude: [
          [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, '.serverless'),
            path.resolve(__dirname, '.webpack'),
          ],
        ],
        options: {
          transpileOnly: true,
          experimentalWatchApi: false,
        },
      },
    ],
  },
  watchOptions: {
    poll: 1000,
    ignored: ["node_modules"]
  }
};

What is the expected behavior?

Other relevant information: webpack version: "^5.70.0" Node.js version: v14.18.0 Operating System: macOS 12.x Additional tools:

"serverless": "~3.12.0",
"serverless-offline": "^8.5.0",
"serverless-webpack": "^5.6.1",

[vicary]

This one might be tricky. Largely TUI priorities between the DX Serverless V3 wants to create and what webpack services.

IMO we should hide ALL outputs from webpack and let the V3 spinner do its spinning unless --verbose is used, but by design plugins can't hide the spinner and I can't think of easy ways to modify webpack outputs in watch mode (e.g. add a line break to give way for the spinner).

Would you mind sharing a minimum reproducing repo, or the refreshing logs in action by other means?