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

[thequailman]

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]

I'm having a hard time reproducing this given the configuration you shared.

Do you have a sample project (on GitHub, or as a .zip file) that you could share which reproduces that behavior?

If you can't share that, what versions of webpack and Workbox are you using? And could you at least share your sw.ts file?

[undermuz]

@jeffposnick I have same error, but i don't use typescript: https://github.com/GoogleChrome/workbox/issues/2263#issuecomment-807077067

[jeffposnick]

Adding this report to the thread to consolidate issues; we will try to address them all via some changes to workbox-webpack-plugin.

I want to use workbox-webpack-plugin to include my own service worker. However, using InjectManifest doesn't work unless I use the output option devToolModuleFilenameTemplate. It seems library: "[name]" is the failing configuration in combination with the workbox-webpack-plugin. Why do I have to set devToolModuleFilenameTemplate when using library: "[name]" option?

[alyssaruth]

Just adding my voice to this, as we're seeing this error too. In our case, the error is introduced when upgrading workbox to version 5 (which happens automatically as part of bumping our version of create-react-app). We've followed the migration guidance and are left with this problem, which is blocking us from getting onto the latest create-react-app version.

[jeffposnick]

I've been able to reproduce this but only when devtool : 'eval-cheap-source-map' and optimization.minimize: true are both set. That doesn't strike me as a particularly common configuration, but at the same time, I'd like to get it working.

[alyssaruth]

Just trying to get my head around what's happened here - it looks to me like a fix has been implemented in workbox itself (merged ready for V6), rather than in the workbox-webpack-plugin. Is that correct? Are any changes anticipated to workbox-webpack-plugin around this issue?

We're in a position where the upgrade we want to do ties us to workbox v5, meaning we'd be unable to get the fix in v6 (because create-react-app decides the workbox version for us).

[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.

[jeffposnick]

The fix is now deployed in a pre-release of Workbox v6.2.0: https://github.com/GoogleChrome/workbox/releases/tag/v6.2.0-alpha.0

[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;