sw-precache-webpack-plugin | Webpack plugin that generates a service worker using sw | Web Framework library

I've been using workbox with same stack (Laravel + VueJS) and it worked like a charm. Apart from that I don't remember this to be extremely difficult or something similar.

Jus installed workbox, add the js reference on the html and not much more, as it is js in the end, once you change your SW the npm run watch will build/reload the app.js and it should work.

Hope it helps

Try to add Internet Explorer in the env targets may help to solve the issue.

It's difficult to say exactly why you have gotten this error, but if you remove the node_modules directory and reinstall every dependency it should work as expected.

Because you package your old react code. You need to build your react app before using electron-builder to package your app. So you need to change pack script to build react.

In production, your CSS will be extracted to a separate file. Because off that, in production, you must include it in your HTML file

The error is a very simple mistake. You're importing (importScript) your application code into the SW script. When it tries to execute, the error happens.

Service Worker execution context is different from the usual page execution context. You cannot execute 1:1 your app code in the SW. It usually wouldn't even make any sense.

I'm mostly sure you've understood the importScripts parameter in the workbox config wrong. It means: import these scripts into the SW and execute them.

babel-core is not @babel/core – they are different packages.

You should be able to get away here with

• installing the babel-core bridge,
• or switch to a newer, unreleased version of vue-jest which uses @babel/core.

HtmlWebPackPlugin is HtmlWebpackPlugin in your configuration. Javascript variables are case-sensitive so being undefined is correct.

As for MiniCssExtractPlugin, you you don't even try to define it at the beginning of your configuration.

So what you're running into is the way that npm modules work - this issue that you're having isn't exclusive to react. We can't be expected to solve this for you - but I can try to point you in the right direction.

I'll use the dependency in your package.json as an example, the line:
"react-error-overlay": "^1.0.10" has a caret (^) next to the version number.

This means when you run npm install in most cases, or npm update then npm will go grab the most recent version of that package, above that version number.

If you compare the two different package.json files in your post you will notice that there are multiple major package versions skipped for quite a few of your dependencies. If you look up semantic versioning you'll find that a major version bump usually is due to a breaking change in the module.

E.g:
Old: "react-error-overlay": "^1.0.10"
New: "react-error-overlay": "^5.1.3"

In here you are jumping from major version 1.x.x to 5.x.x. That is over 4 breaking changes for just this module alone.

Basically, this means that the module does not work in the same way it did before. If you project worked a year or so ago - and you ran npm update - it most likely will fail now as you're pulling in new major package versions.

If you just want your project to work as it did before, here is what I recommend:
Take the original version of your package.json and remove the ^ carets in the version numbers.
Then clear out your node_modules folder in your project.
Then run npm install.

This should pull in the module versions very similar to what you were working with before. Try and see if it runs then. If it does, update your dependencies individually from there - and find which major version bumps cause your project to break.

Also:
As for the typeError you are getting - it stems from react-konva as noted in this issue thread:
https://github.com/konvajs/react-konva/issues/147#issuecomment-346217504

react-konva above version 1.1.6 is for react v16 and above

Target react v15 by using the version:
"react-konva": "1.1.6"