offline-plugin | Offline plugin for webpack | Web Framework library

I am trying to setup Storybook from scratch for a new project. I am hitting a wall and finding no useful information online around a babel/webpack issue that appears during build.

Note that I am able to correctly run Storybook locally, this issue only happens during build time.

The project has no webpack.config.js file as none came via the following commands.

How to diagnose further and fix the build issues?

Initial Set-up

• React Boilerplate: https://react-boilerplate.github.io/react-boilerplate-cra-template/
• Storybook out of the box set-up: https://storybook.js.org/docs/react/get-started/install

No issue running storybook locally

npm run storybook --debug-webpack

I have a gatsby website that uses MaterialUI Components.

Somehow the css styles get applied to the wrong components of my website. I got the following code that is related to the problem.

Layout.js

I transitioned from a previous React app to a new template. Issue is i am quite confused about how redux is setup and how i can implement authentication.

LoginForm

guys. I was assigned to a project where they had a webpack offline-plugin in the past, but now we don't have it and it is completely unnecessary to have it in the project.

It was installed in such way:

When using firebase.auth().signInWithPopup(firebase.auth.GoogleAuthProvider()) the popover opens but doesn't redirect to the accounts.google sign-in page, it goes to the page not found route of my application. I believe this is down to something with the service-worker which is made through offline-plugin. This is built into React-boilerplate, the project is using v3. I'm also using react-redux-firebase which works fine overall so I don't believe it's a problem with that set up.

Webpack prod file

I followed a lot of tutorials on how to reduce the bundle size, but nothing took any effect on the bundle size and I don't know why.

Every time when I add some new code to webpack, my bundle size stays the same as before.

(My app is built with vue cli 3 pwa plugin, webpack... and so on)

If I run npm run build, I'm getting this output:

webpack.config.js:

I have a reactjs PWA based on webpack and offline-plugin. currently I have a working application based on Webpack 3. I updated my webpack version to 4 and now I want to release my new version. but I have a big issue here. when I upgrade my PWA to webpack 4 in a device which old version is cached, service worker does not detect changes and would not update application. could anybody help me on this issue.

this is my updating peace of code, which works great on webpack 3 but not on migration from webpack 3 to 4:

I was reading NekR/offline-plugin source code. In the update method it calls browser's ServiceWorker.update().

I want to know that if this method force activate the new service worker(i.e. skipWaiting) or it just pull the latest service worker and waiting for user to detach service workers from browser(i.e. waiting phase).

I'm experimenting with GatsbyJS. I created a new site derived from their default site generator and made some changes. When using the gatsby develop command everything works as expected. I went to use gatsby build and it does produce a /public folder, however there's no "index.html" or even "bundle.js"

Is the default site "special" in that it won't produce a site the typical way? Is there another setting needed in the gatsby-config version to produce index.html?

A ls of the /public directory returns: