workbox-webpack-plugin build error with TypeScript and eval-cheap-source-map

Welcome! Please use this template for reporting bugs or requesting features. For questions about using Workbox, the best place to ask is Stack Overflow, tagged with [workbox]: https://stackoverflow.com/questions/ask?tags=workbox

Library Affected: workbox-webpack-plugin

Browser & Platform: all browsers

Issue or Feature Request Description: When using workbox-webpack-plugin with TypeScript and eval-cheap-source-map, the following error is generated for the service worker and execution halts:

Uncaught SyntaxError: missing ) after argument list, line 25 of sw.js

This doesn’t happen with inline-source-map. I’ve been using this but it’s very slow.

Here is the webpack config bits:

module.exports = {
	devtool: devMode ?
		"eval-cheap-source-map" :
		false,
...
	module: {
		rules: [
			{
				test: /\.(js|ts)$/,
				use: {
					loader: "ts-loader",
					options: {
						happyPackMode: true,
					},
				},
			},
...
	plugins: [
		new InjectManifest({
			swDest: "sw.js",
			swSrc: "./src/sw.ts",
		}),

[jeffposnick]

Hello @alexburlton-sonocent—all of the Workbox libraries are released concurrently (using lerna) and have matching version numbers.

The fix for this issue was merged into the v6 branch and will go live with the planned v6.2.0 release of all of the Workbox libraries (including workbox-webpack-plugin), which is unfortunately still blocked on a few more changes we plan on making.

We don’t anticipate backporting this sort of change to the v5.x releases.

[TravelFiend]

This issue is still occurring in my React 18 app on the latest workbox version (6.5.4). Here’s my webpack config file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DotEnv = require('dotenv-webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { InjectManifest } = require('workbox-webpack-plugin');


const currentTask = process.env.npm_lifecycle_event;

const config = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    filename: 'bundle.[fullhash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html'}),
    new DotEnv({ systemvars: true }),
    new CopyPlugin({ patterns: [{ from: 'public' }] })
  ],
  devtool: 'eval-cheap-source-map',
  devServer: {
    port: 7890,
    static: path.resolve(__dirname, 'dist'),
    hot: true,
    open: true
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      },
      {
        test: /\.(sc|c)ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpeg|jpg|png|svg|pdf)$/,
        use: {
          loader: 'file-loader?name=.public/assets/images/[name].[ext]'
        },
      }
    ]
  }
};

if (currentTask === 'build'){
  config.mode = 'production';
  config.plugins.push(
    new MiniCssExtractPlugin({ filename: 'main.[fullhash].css' }),
    new InjectManifest({
      swSrc: './src/serviceWorker/ServiceWorker.js',
      swDest: 'sw.js'
    })
  );
  config.module.rules[1].use[0] = MiniCssExtractPlugin.loader;
}

module.exports = config;