Getting _flutter is undefined in flutter web, only in production

Question

I have an error that has been appearing in my last few deploys and I am unable to trace it. It only happens when I deploy to firebase website, debug works without any issues.

Uncaught SyntaxError: Unexpected token '<' (at flutter.js:1:1)
(index):50 Uncaught ReferenceError: _flutter is not defined
    at (index):50:7

This shows up in the browser console.

This is my index.html:

<!DOCTYPE html>
<html>

<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Trading made easy">
  <meta name="google-signin-client_id"
    content="xxx.apps.googleusercontent.com">

  <!-- 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="tornmarket">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png" />

  <title>Torn Market</title>
  <link rel="manifest" href="manifest.json">
  <!-- <script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script> -->
  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>

<body>
  <script>
    window.addEventListener('load', function (ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function (engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function (appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
</body>

</html>

try upgrading your packages, I'm having the same error, but only with expressJS not firebase hosting — Nimr Sawafta, Jul 06 '22 at 09:31
I think the problem with firebase config file, can you show it — Nimr Sawafta, Jul 06 '22 at 09:46
since if you tried to see what is in flutter.js from the browser you can see it's the index,html, so firebase is sending the wrong file to the browser — Nimr Sawafta, Jul 06 '22 at 09:47

score 19 · Answer 1 · answered Dec 07 '22 at 21:29

19

Here's a solution that worked for me.

In index.html

Change this

<base href="/">

To this

<base href="./">

answered Dec 07 '22 at 21:29

Joshua Emmanuel

201
2
4

This is a good solution when the index.html is not in the root directory of the php web server. – George Jan 20 '23 at 12:47
It worked for me with clearing the browser's cache. – commandiron May 03 '23 at 09:48
This was the fix for me as well. There's a blub at the top of the index.html page where the flutter devs talk about changing this value to make your website work. " If you are serving your web app in a path other than the root, change the href value below to reflect the base path you are serving from." See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base – Matthew Peterson Jun 01 '23 at 22:59

score 5 · Answer 2 · answered Oct 31 '22 at 16:48

5

You should try to rebuild your application with:

flutter clean

and then

flutter build web

I tried to delete build folder manually, but it didn't work. It's preferable to use flutter clean.

answered Oct 31 '22 at 16:48

Johannes Nogueira

51
1
2

score 1 · Answer 3 · answered Nov 05 '22 at 23:21

Open the index.html file in your_project_name/build/web path and put this script after the body tag : <script src="main.dart.js" type="application/javascript"></script>. If it didn't work so maybe flutter.js is missing from the build directory so clean your project by flutter clean in the terminal then build it again using flutter build web after that add the tag I mentioned above. Now deploy your web to the host.

score 1 · Answer 4 · answered Apr 17 '23 at 12:12

I am facing the same error many days later finding the complete solution steps

Step 1

Change

<script src="flutter.js" defer></script>

To This

<script src="/main.dart.js" defer></script>

Note: Then After Stp 2 change inside of <body>...</body>

Step 2

Change

    <script>
    window.addEventListener('load', function (ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function (engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function (appRunner) {
        return appRunner.runApp();
      });
    });
   </script>

To This

    <script>
  if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js?v=1417913520');
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      entrypointUrl: "/main.dart.js",
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function (engineInitializer) {
          engineInitializer.initializeEngine().then(function (appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>

score 1 · Answer 5 · answered Jun 18 '23 at 15:59

1

Better to use any web server.

Example using python:

cd build/web
python -m http.server 8000 // or python3

and visit http://localhost:8000 on your browser

Documentation: https://docs.flutter.dev/deployment/web#building-the-app-for-release

answered Jun 18 '23 at 15:59

Razi Kallayi

862
9
19

score 0 · Answer 6 · answered Oct 01 '22 at 20:08

0

You're most likely missing the flutter.js file in the build/web folder

answered Oct 01 '22 at 20:08

Manbus

706
4
9

score 0 · Answer 7 · answered Oct 12 '22 at 16:14

don't know whether below code works or not. try to implement the same and revert back. please change your body tag as below

<body>
<script src="main.dart.js" type="application/javascript"></script>
  <script>
  if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
</body>

score 0 · Answer 8 · answered Apr 16 '23 at 13:53

I have faced same issue and tried with flutter clean and flutter build web but still facing same issue of

Uncaught SyntaxError: Unexpected token '<' (at flutter.js:1:1)

or

Uncaught SyntaxError: Unexpected token '<' (at main.dart.js.js:1:1)

Solution

Step 1: clear the build

flutter clean

Step 2: remove <!DOCTYPE html> from the web/index.html file

Step 3: Build it now

flutter build web

It works now

Note:

Without step 2, it's works fine at Netlify but not with Nginx
In server, while we call the index.html, flutter.js/main.dart.js try to execute the HTML code in .js script. It's causing the issue

Getting _flutter is undefined in flutter web, only in production

8 Answers8

Step 1

Change

To This

Step 2

Change

To This

Solution