Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

workbox-webpack-plugin version 5 upgrade errors

See original GitHub issue

Library Affected: workbox-webpack-plugin

Browser & Platform: all browsers".

Issue or Feature Request Description: upgrading to workbox version 5 errors

I have upgraded recently upgraded workbox to version 5 . The workbox is used using webpack. The webpack config is as follows:

new workboxPlugin.GenerateSW({
		swDest: 'sw.js',
		clientsClaim: true,
		skipWaiting: true,
	})

The sw in the app is configured as follows:

function init() {
  if (process.env.NODE_ENV === "development" && "serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("/sw.js").then((registration) => {
        logger.debug("SW registered: ", registration);
      }).catch((registrationError) => {
        logger.debug("SW registration failed: ", registrationError);
      });
    });
  }
}

It was working fine in v4.3.1 (workbox-webpack-plugin) but ever since its upgraded to v5 it started to give following erros (lots of them) when start the webpack.

..................
122:5-18
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/TimePickerToolbar-81100fab.js] ..../node_modules/@material-ui/pickers/esm/TimePickerToolbar-81100fab.js 131:6-19
    harmony side effect evaluation react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 1:0-99
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 44:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 67:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 73:13-26
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 76:6-19
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 80:18-31
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 83:37-50
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 86:33-46
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 89:30-43
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 120:58-67
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 120:70-85
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 131:23-29
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 170:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 170:23-31
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 170:39-52
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 170:107-120
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 219:12-18
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 223:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 223:23-31
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 223:39-52
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 225:7-20
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 258:21-34
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 264:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js] ..../node_modules/@material-ui/pickers/esm/Wrapper-241966d7.js 266:5-18
    harmony side effect evaluation react [./node_modules/@material-ui/pickers/esm/index.js] ..../node_modules/@material-ui/pickers/esm/index.js 2:0-15
    harmony side effect evaluation react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 2:0-120
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 43:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 60:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 63:13-26
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 122:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 140:27-34
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 145:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 166:9-23
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 166:54-68
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 168:6-20
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 314:18-25
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 324:9-22
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 333:11-24
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 341:104-117
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 343:31-44
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js 352:16-29
    harmony import specifier react [./node_modules/@material-ui/pickers/esm/makePickerWithState-5a79cb8a.js] ..../node_modules/@material-ui/pickers/esm/makePickerWithSta
..........................

Its a simple configuration, any idea?

Issue Analytics

State:
Created 4 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

philipwaltoncommented, Feb 5, 2020

Can you share more details about your webpack config? Most of those errors seem to be coming from @material-ui, and Workbox is not mentioned anywhere in that stack trace.

I suspect the problem is not with Workbox itself, but perhaps an issue with how some other package is integrating with Workbox. In order to debug further, though, we’d have to know more about your webpack config.

0reactions

jeffposnickcommented, Jun 1, 2020

I’m closing this for now as I’m not sure that’s there’s anything actionable on our end. If this is something that you’re up for debugging further, we can reopen.

Top Results From Across the Web

workbox-webpack-plugin - npm

A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.. Latest version: ...

workbox-webpack-plugin - npm Package Health Analysis - Snyk

A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. For more information about...

Migrate from Workbox v4 to v5 - Chrome Developers

A guide to migrating from Workbox v4 to v5. ... If you're using workbox-webpack-plugin , update your webpack setup to use at least...

Installation | webpack

js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with...

Migrate from v4 - Vue CLI

We've upgraded the underlying webpack version to 5. ... The underlying workbox-webpack-plugin is upgraded from v4 to v6.