How to resolve service worker error in react?

Question

I am getting a service worker error while running my react app. Can you please help me why it's getting the error. Screenshot link is given below,

Servier worker error message

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import config from './config/index'
import App from './App';
import './index.scss'
import * as serviceWorker from './serviceWorker';

const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({}))
  )
);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
serviceWorker();

Answer 1

It's a simple mistake =)

Look at this line:

import * as serviceWorker from './serviceWorker';

and then look here:

serviceWorker();

On the first line of code you're importing the whole module into your file's scope as 'serviceWorker'. On the second line you're trying to call that module. But you cannot call a module, it's not allowed. It's also what the error message says right at the top of your screenshot.

I think what you actually should be doing is something like this:

import { register } from './serviceWorker';
...
...
register();

or something similar. It might also be registerServiceWorker or something like that. Look at the ./serviceWorker.js file and find out.

One thing to note: I would seriously consider _not using_ Service Workers in your project until you know exactly how they work, what they are etc. It is SUPER EASY to cause a lot of problems by using Service Workers without really knowing them.