Skip to content

[WEB] Refresh MIME Type Error on destination route when using usePathUrlStrategy on Flutter stable 3.24.0 #152995

@JAICHANGPARK

Description

@JAICHANGPARK

Steps to reproduce

Hello ~
When I add flutter_web_plugins and use usePathUrlStrategy(), an error occurs when I refresh the page.
and When I remove usePathUrlStrategy() and refresh the page, it loads correctly.

I am using Flutter version 3.24.
This was a feature that worked well before.

Thanks

Expected results

The page should load correctly when the browser is refreshed.

Actual results

Refused to execute script from 'http://localhost:58756/home/main.dart.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

The script has an unsupported MIME type ('text/html').

flutter_bootstrap.js:3 Exception while loading service worker: DOMException: Failed to register a ServiceWorker for scope ('http://localhost:58756/home/') with script ('http://localhost:58756/home/flutter_service_worker.js?v=null'): The script has an unsupported MIME type ('text/html').
(anonymous) @ flutter_bootstrap.js:3
Promise.catch
load @ flutter_bootstrap.js:3
(anonymous) @ flutter_bootstrap.js:12
page1:1 Refused to execute script from 'http://localhost:58756/home/main.dart.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Code sample

pubspec.yaml

Code sample
environment:
  sdk: ^3.5.0
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  go_router: ^14.2.3
  flutter_web_plugins:
    sdk: flutter

main.dart code

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Page1"),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Page2"),
      ),
    );
  }
}

void main() {
  usePathUrlStrategy(); // 추가
  GoRouter.optionURLReflectsImperativeAPIs = true;
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _router = GoRouter(
    routes: [
      GoRoute(
        path: "/",
        builder: (context, state) => const MyHomePage(title: "Home"),
      ),
      GoRoute(path: "/home/page1", builder: (context, state) => Page1()),
      GoRoute(path: "/home/page2", builder: (context, state) => Page2()),
    ],
  );

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: _router,
      // home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            TextButton(
                onPressed: () {
                  context.go("/home/page1");
                },
                child: Text("페이지 이동"))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

Screenshots or Video

Issue Case

Screenshots / Video demonstration
Screen.Recording.2024-08-07.at.3.31.46.PM.mov

default setup case

Screen.Recording.2024-08-07.at.3.44.14.PM.mov

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.0, on macOS 14.5 darwin-arm64, locale
    en-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.1.4)
[✓] VS Code (version 1.92.0)
[✓] Connected device (3 available)
[✓] Network resources

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: crashStack traces logged to the consolec: regressionIt was better in the past than it is nowcustomer: crowdAffects or could affect many people, though not necessarily a specific customer.found in release: 3.24Found to occur in 3.24has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions