如何将 src 模块导入 React 中的公用文件夹？

Question

As I'm using Firebase Cloud Messaging in my React , it requires me to put the firebase-messaging-sw.js in my public folder.

In there, it is defining the function for the onBackgroundMessage , which I want to have an access to my module, and update some of my components in my src.

import { toast } from "react-toastify"; // or import my other modules
messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);

  //toast or do some updating my modules
  toast(`Message received : ${payload}`) // here comes the error 
});

But I got an error of

Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:3:1)

How can I import my src module to the public folder?

How should I properly use the onBackgroundMessage in React?

is it normal to import module from src to the public folder?

Answer 1

Use importScripts to import scripts into the worker's scope like firebase-messaging itself.

importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');