(index):7272 crbug/1173575, non-JS module files deprecated in Flutter and Firebase

firebase flutter google-chrome dart flutter-web

1,622

There was one script tag missing in my index.html file so first always check your html file for these kind of errors but I also did these below steps. so make sure you do this if there are no errors in your html file.

Deleting the widget_test.dart file did worked for me and

I also deleted auto generated launch.json which was created again after deletion.

I was using flutter_webrtc with flutter which uses stun and turn servers so I first removed that plugin and all code related to that and reinstalled them later on so I guess improper installation of plugins and wrong html script tags causes this error... I then run flutter clean and flutter create . and now It's working fine. and when I run usual firebase deploy command it worked out.

1,622

Author by

Mithson

Computer Science Enthusiast learning to be good at problem solving Interested in creation of mobile application, web app, desktop apps and embedded systems. Skilled in logic, Algebra and Discrete maths. I am well versed in Python, C, SQL, Javascript, Flutter, Java, Angular, HTML, CSS, Linux, Algorithms and Data structure Handy with softwares like netbeans, Android studio, vscode and Visual studio.

Updated on January 01, 2023

Comments

Mithson over 1 year

I am getting this error in chrome console when I deploy my Flutter app to Firebase,

(index):7272 crbug/1173575, non-JS module files deprecated.

it first loaded the old version of the app but now its throwing me this error and took too long to respond message on chrome page. I tried deleting that firebase channel and created new one but still nothing changes. Also when I first open my site in chrome incognito mode it worked for the first time but now its also not working...

I also tried deleting my launch.json file in vscode thinking that this might the problem cause but still nothing changes.

this web app is also not working in IOS 12.5.4 so what's causing this problem I ain't able to figure out please help, but my main concern is in windows chrome this is my web app Below is my index.html file and I hide my firebase apikeys so ignore that

<!DOCTYPE html>
<html>
  <head>
    <!-- <base href="/"> -->
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">
  
    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Devcom">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">
  
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
  
    <title>Devcom</title>
    <link rel="manifest" href="manifest.json">
  </head>
<body>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script> 
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script> 

<script type="module"> 
   var firebaseConfig = {
      apiKey: "",
      authDomain: "devcom-ecc99.firebaseapp.com",
      databaseURL: "https://devcom.firebaseio.com", 
      projectId: "devcom-ecc99",
      storageBucket: "devcom-ecc99.appspot.com",
      messagingSenderId: "......",
      measurementId: ".......",
      appId: "1:.........:web:........",
    };
    firebase.initializeApp(firebaseConfig);
    // const app = initializeApp({ firebaseConfig });
// const app = getAnalytics({ firebaseConfig })    
</script>
 <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      // Service workers are supported. Use them.
      window.addEventListener('load', function () {
        // Wait for registration to finish before dropping the <script> tag.
        // Otherwise, the browser will load the script multiple times,
        // potentially different versions.
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl)
          .then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', () => {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing ?? reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });

        // If service worker doesn't succeed in a reasonable amount of time,
        // fallback to plaint <script> tag.
        setTimeout(() => {
          if (!scriptLoaded) {
            console.warn(
              'Failed to load app from service worker. Falling back to plain <script> tag.',
            );
            loadMainDartJs();
          }
        }, 4000);
      });
    } else {
      // Service workers not supported. Just drop the <script> tag.
      loadMainDartJs();
    }
  </script>
 
</body>
</html>

Any help is appreciated...

thank you,