Unhandled Rejection (SecurityError): The operation is insecure. On a fresh create-react-app project

Question

I created a new project with create-react-app then ran npm start then this showed up. https://i.stack.imgur.com/GzXmh.jpg

Using FF 69.0.3

Answer 1

This problem seems to only happen in Firefox. Edge worked fine.

After creating the project, in index.js change:

serviceWorker.register();
//serviceWorker.unregister();

Still trying to figure whose fault this is, but this should get you going.

Answer 2

Another solution found in the link in the answer by Niraj Niroula:

If you want to keep the Delete cookies and site data when Firefox is closed option enabled, click on the Manage Exceptions button and add localhost (with the protocol and port) to the exceptions list:

Answer 3

Seems that the issue exists only in Firefox. Anyone still bugged by this bug can try disabling Delete cookies and site data when Firefox is closed option in Privacy and Security settings. Or try wrapping the navigator.serviceWorker usages inside a try/catch. In my case

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.ready
      .then(registration => {
        registration.unregister();
      })
      .catch(error => console.log("ServiceWorker Warning: ", error));
  }

For related discussion and more info

Answer 4

A lot of answers here do actually solve the issue but the simplest way I have found is to add npm package serve to your dependencies.

yarn add serve or npm i serve

and then replace your start script with the following:

"scripts": {
    "start": "serve -s build",
}

This is actually straight out of the create-react-app docs

Answer 5

I had this error occur as well. Was able to clear it up by deleting the create-react-app serviceWorker.js file

Answer 6

For me, it was a malformed URL in the call to the route() function in PreactJS.

I basically added a slash too much when integrating the process.env.PUBLIC_PATH variable into my links like so:

export function Example(props: {}) {
  const callback = useCallback((e: JSX.TargetedEvent<HTMLButtonElement>) => {
    route(`${process.env.PUBLIC_PATH}/my/path`)
//                                   ^
//                                   That slash is too much
  }, [])
  return <button onClick={callback}>Click me</button>
}

After clicking the button, the URL looked something like this in my Chrome location bar:

https://localhost/my-app//my/path
                        ^^
                        Here is the forbidden double slash

Interestingly, only Firefox reported this to me, while Chrome happily rendered the page and ignored the double slash.

The solution was simply to remove the unnecessary slash, since env.process.PUBLIC_PATH always needs to end with a slash:

route(`${process.env.PUBLIC_PATH}my/path`)
//                              ^^
//                              No extra slash fixed it!