I extracted this PR out of #117691 because it looks like that one will take a while to land. So let's fix the actual issue now, and worry about improving the ergonomics of generated files later.

Hi @ditman @mdebbar quick question, is this fix available on the stable channel? I'm having problems with this #119492 Thanks in advance.

Hello friends, ty for your hard work with Flutter....I just wanted to ask if u have already a date of release for this commit on the stable channel? My web project isn't working with flutter 3.7.0 due to this issue (as reported in #116360 too).

Hello friends, ty for your hard work with Flutter....I just wanted to ask if u have already a date of release for this commit on the stable channel? My web project isn't working with flutter 3.7.0 due to this issue (as reported in #116360 too).

Neither mine

@leynier @RamiroGarrido @Sipioteo there has been a stable release very recently (last week), so it's unlikely that this will get to stable until the next release (in about 3 months), unless it goes through the cherry-pick process. Documentation.

Before we even think of cherry-picking: Have you verified that what's currently in channel master fixes your issues?

@leynier @RamiroGarrido @Sipioteo there has been a stable release very recently (last week), so it's unlikely that this will get to stable until the next release (in about 3 months), unless it goes through the cherry-pick process. Documentation.

Before we even think of cherry-picking: Have you verified that what's currently in channel master fixes your issues?

Ty for your response ditman!...I wasn't sure to downgrade to my previous flutter version, but now I am.... to answer your question: I updated my web project from 3.3.10 to 3.7.0 three days ago, so I'm sure this issue it's not fixed yet on the stable channel...Blessings

I wasn't sure to downgrade to my previous flutter version, but now I am...

Have you considered upgrading to flutter master, rather than downgrading to 3.3?

Have you considered upgrading to flutter master, rather than downgrading to 3.3?

I thought about it, but I rather wait since the master channel may have broken code, according to the wiki (https://github.com/flutter/flutter/wiki/Flutter-build-release-channels)...I think is better to avoid a bug on my production environment...ty for your suggestion though...maybe the other people reading this thread might give it a shot and report back to us...

@leynier @RamiroGarrido @Sipioteo there has been a stable release very recently (last week), so it's unlikely that this will get to stable until the next release (in about 3 months), unless it goes through the cherry-pick process. Documentation.

Before we even think of cherry-picking: Have you verified that what's currently in channel master fixes your issues?

Yeah, I tried. But some of the packages are not compatibles with the master version (missing a vsync param into an animated widget, I don't remember which one right now).
I have to use an older version of flutter right now, so if it's possible to cherry pick it would be a really great move.

Thank you!

I have found this temporary solution.

Put the new flutter.js file into the web folder and rename it:

Change the index.html with the absolute path of the new file

And that's it, now it's working and it is possible to debug.

Best to all, and waiting for the update!

Workaround for every project:

1. apply changes to flutter\packages\flutter_tools\lib\src\web\file_generators\flutter_js.dart and save
2. remove flutter\bin\cache\flutter_tools.stamp
3. run flutter doctor to Rebuild flutter tool

When new stable is available:
run git reset --hard in flutter folder otherwise it won't find new releases.

As far as I can tell, the latest Flutter stable release that includes this bug has broken every Flutter web app that uses paths?

This seems like it should qualify for an extremely urgent cherry pick into stable?

For anyone else coming across this, here's a complete fix for the stable branch that will work on CI systems and without having to mess with stable/master switching:

In web/index.html, change this:

        _flutter.loader.loadEntrypoint({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          }
        })

to this:

      _flutter.loader.loadEntrypoint({
        entrypointUrl: "/main.dart.js",
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
          serviceWorkerUrl: "/flutter_service_worker.js?v=",
        },
      );

Taken from #116360 (comment).

@stx yeah, if only for the amount of confusion around this, I'll bring it up to the next cherry-pick. (/cc @mdebbar)

@stx have you tried to pass the correct explicit entrypointUrl and serviceWorkerUrl to the loadEntrypoint call, as described here?

#116360 (comment)

I'd say passing /YOUR_APP_BASE/main.dart.js and /YOUR_APP_BASE/flutter_service_worker.js?v= should fix the issues without needing to change the flutter.js file itself.

@ditman I didn't see that solution. Yep, works nicely!

Thanks everyone for the feedback. I filed an issue to cherry-pick this PR into the stable channel: #120197

Updated the description at the top answering the FAQ about this being cherry-picked, and how to work-around this until the fix arrives.

For those who run into problems with UrlStrategy path in combination with a custom entrypointUrl or serviceWorkerUrl: this PR only fixes the defaults and therefor does not work in the scenarios where a custom entrypointUrl or serviceWorkerUrl is used. We have fixed it like this:

      window.addEventListener("load", function (ev) {
        // Download main.dart.js
        const baseUri = document.baseURI;
        _flutter.loader.loadEntrypoint({
          entrypointUrl: `${baseUri}main.dart.js`,
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
            serviceWorkerUrl: `${baseUri}flutter_service_worker.js?version=${serviceWorkerVersion}`,
          },
          ...

A better fix for this PR would have been to fix the actual loading of the JS, instead of just fixing the defaults.

Please note that web bootstrapping has undergone a recent refactor: #144434. We have not checked this new approach.

@Frank3K have you figured out how to use your solution within flutter 3.22?

@MirzaCickusic For 3.22 this should work:

{{flutter_js}}
{{flutter_build_config}}

const serviceWorkerVersion = {{flutter_service_worker_version}};

let baseUri = document.baseURI;
if (baseUri.endsWith('/')) {
    baseUri = baseUri.slice(0, -1);
}

_flutter.loader.load({
    config: {
      canvasKitBaseUrl: `${baseUri}/canvaskit/`,
    },
    serviceWorkerSettings: {
      serviceWorkerVersion: serviceWorkerVersion,
      serviceWorkerUrl: `${baseUri}/flutter_service_worker.js?v=${serviceWorkerVersion}`,
    },
    onEntrypointLoaded: function (engineInitializer) {
      engineInitializer.initializeEngine().then(function (appRunner) {
        appRunner.runApp();
      });
    },
});

@Frank3K your code doesn't work if you refresh the page. Flutter still tries to find main.dart.js under the path you're currently in instead of looking at the base.

This code works for me even after refreshing the page:

<script>
    {{flutter_js}}
    {{flutter_build_config}}
    const serviceWorkerVersion = {{flutter_service_worker_version}};
    
    window.addEventListener('load', () => {
      _flutter.loader.loadEntrypoint({
        entrypointUrl: "/main.dart.js",
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
          serviceWorkerUrl: "/flutter_service_worker.js?v=",
        },
        onEntrypointLoaded: async (engineInitializer) => {
          const appRunner = await engineInitializer.initializeEngine({
              hostElement: document.querySelector("#app-wrapper"),
          });
          appRunner.runApp();
        }
      });
    });
  </script>

But I haven't been able to replicate the same behavior when migrating from loadEntryPoint to load.
entrypointUrl seems to just have ceased to exist with no alternative 🤷‍♂️

Hi @cerealexx @Frank3K. I'm having the same issue mentioned here, but sadly I'm at a loss as to what file I need to be modifying with your supplied code. Could you please tell me which one it is? Thanks, Andy.

Hi @cerealexx @Frank3K. I'm having the same issue mentioned here, but sadly I'm at a loss as to what file I need to be modifying with your supplied code. Could you please tell me which one it is? Thanks, Andy.

This is the flutter_bootstrap.js file.

@MirzaCickusic For 3.22 this should work:

{{flutter_js}}
{{flutter_build_config}}

const serviceWorkerVersion = {{flutter_service_worker_version}};

let baseUri = document.baseURI;
if (baseUri.endsWith('/')) {
    baseUri = baseUri.slice(0, -1);
}

_flutter.loader.load({
    config: {
      canvasKitBaseUrl: `${baseUri}/canvaskit/`,
    },
    serviceWorkerSettings: {
      serviceWorkerVersion: serviceWorkerVersion,
      serviceWorkerUrl: `${baseUri}/flutter_service_worker.js?v=${serviceWorkerVersion}`,
    },
    onEntrypointLoaded: function (engineInitializer) {
      engineInitializer.initializeEngine().then(function (appRunner) {
        appRunner.runApp();
      });
    },
});

FWIW, this worked for me however I did have to downgrade Flutter from v3.24.0 to v3.22.3