Upgrading to webpack 5 + babel 7, watch mode not working

[dels07]

Hi,

I'm yesterday I tried to upgrade app_scaffold to webpack 5 + babel 7 but found out watch mode doesn't work correctly (using ?zat=true) as whenever I reload the app I got error so I need to terminate watch and reissue the command.

Error

Sinatra doesn’t know this ditty.

class ZendeskAppsTools::Server
  get '/iframe.html' do
    "Hello World"
  end
end

Terminal

::1 - - [03/Dec/2020:16:55:22 +0700] "GET /app.js?locale=en&subdomain=fabelio HTTP/1.1" 200 1075 0.0083
::1 - - [03/Dec/2020:16:55:22 +0700] "GET /iframe.html?origin=https%3A%2F%2Ffabelio.zendesk.com&app_guid=b0b3c092-ed92-4f4c-b19c-895103d3928e HTTP/1.1" 404 705 0.0006

Here my package.json

"devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "@babel/runtime-corejs3": "^7.12.5",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@zendeskgarden/css-arrows": "^3.1.4",
    "@zendeskgarden/css-avatars": "^6.0.10",
    "@zendeskgarden/css-bedrock": "^8.0.1",
    "@zendeskgarden/css-buttons": "^8.0.0",
    "@zendeskgarden/css-callouts": "^3.3.17",
    "@zendeskgarden/css-forms": "^7.0.20",
    "@zendeskgarden/css-grid": "^0.1.38",
    "@zendeskgarden/css-menus": "^9.0.20",
    "@zendeskgarden/css-modals": "^6.4.21",
    "@zendeskgarden/css-pagination": "^4.0.19",
    "@zendeskgarden/css-tables": "^4.0.19",
    "@zendeskgarden/css-tabs": "^6.0.19",
    "@zendeskgarden/css-tags": "^5.1.15",
    "@zendeskgarden/css-tooltips": "^4.1.27",
    "@zendeskgarden/css-utilities": "^4.5.5",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "6.3.2",
    "core-js": "^3.8.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^1.3.1",
    "postcss": "^8.1.10",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "precss": "^4.0.0",
    "standard": "^16.0.3",
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0"
  },

and webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TranslationsPlugin = require('./webpack/translations-plugin')
const devDependencies = require('./package.json').devDependencies

// this function reads Zendesk Garden npm dependencies from package.json and
// creates a jsDelivr url
const zendeskGardenJsDelivrUrl = (function () {
  const pkg = Object.keys(devDependencies).filter(item => item.includes('@zendeskgarden/css'))
  const getPkgName = (url, pkg) => {
    const version = devDependencies[pkg]
      .replace(/^[\^~]/g, '')
      .replace(/\.\d$/, '')
    url = `${url}npm/${pkg}@${version},`
    return url
  }
  return pkg.length && pkg.reduce(
    getPkgName,
    'https://cdn.jsdelivr.net/combine/'
  ).slice(0, -1)
}())

const externalAssets = {
  css: [
    zendeskGardenJsDelivrUrl
  ],
  js: [
    'https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js'
  ]
}

module.exports = {
  entry: {
    app: [
      './src/javascripts/locations/ticket_sidebar.js',
      './src/index.css'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist/assets')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: { loader: 'babel-loader' }
      },
      {
        type: 'javascript/auto',
        test: /\.json$/,
        include: path.resolve(__dirname, './src/translations'),
        use: './webpack/translations-loader'
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { url: false } },
          'postcss-loader'
        ]
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    // Empties the dist folder
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['dist/*']
    }),

    // Copy over static assets
    new CopyPlugin({
      patterns: [
        { from: 'src/manifest.json', to: '../', flatten: true },
        { from: 'src/images/*', to: '.', flatten: true }
      ]
    }),

    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),

    new TranslationsPlugin({
      path: path.resolve(__dirname, './src/translations')
    }),

    new HtmlWebpackPlugin({
      warning: 'AUTOMATICALLY GENERATED FROM ./src/templates/iframe.html - DO NOT MODIFY THIS FILE DIRECTLY',
      vendorCss: externalAssets.css.filter(path => !!path),
      vendorJs: externalAssets.js,
      template: './src/templates/iframe.html',
      filename: 'iframe.html'
    })
  ]
}