Getting _flutter is undefined in flutter web, only in production

Asked 1/7, 2022 at 19:12 Answered 18/6, 2023 at 15:59

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>

Brei answered 1/7, 2022 at 19:12 Comment(4)

try upgrading your packages, I'm having the same error, but only with expressJS not firebase hosting – Methylamine 6/7, 2022 at 9:31

I think the problem with firebase config file, can you show it – Methylamine 6/7, 2022 at 9: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 – Methylamine 6/7, 2022 at 9:47

any solution?... – Cacoepy 26/9, 2022 at 9:10

Here's a solution that worked for me.

In index.html

Change this

<base href="/">

To this

<base href="./">

Actionable answered 7/12, 2022 at 21:29 Comment(5)

This is a good solution when the index.html is not in the root directory of the php web server. – Mug 20/1, 2023 at 12:47

It worked for me with clearing the browser's cache. – Scythe 3/5, 2023 at 9: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: developer.mozilla.org/en-US/docs/Web/HTML/Element/base – Chukar 1/6, 2023 at 22:59

This is a problem if you are using CI/CD. flutter will throw error if you try to do flutter build web --base-href "./". It will say that base-href has to start and end with / – Garratt 6/11, 2023 at 11:7

In my case I had changed the base path recently, but forgotten a <base href="/old-path">in my code. This answer helped me pinpoint that. This should be the accepted answer. – Rainband 3/4 at 13:37

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.

Scanlon answered 31/10, 2022 at 16:48 Comment(0)

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.

Disperse answered 5/11, 2022 at 23:21 Comment(0)

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>

Feininger answered 17/4, 2023 at 12:12 Comment(0)

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

Courtneycourtrai answered 1/10, 2022 at 20:8 Comment(0)

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>

Bubalo answered 12/10, 2022 at 16:14 Comment(0)

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)

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

Cratch answered 16/4, 2023 at 13:53 Comment(0)

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

Trainor answered 18/6, 2023 at 15:59 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Step 1

Change

To This

Step 2

Change

To This

Solution

Recommended topics

Hot tags