[syncfusion_flutter_pdfviewer][Web] Works in local but not on Firebase Hosting

[arioul89]

Bug description

Hello guys,

Once the code is deployed on Firebase Hosting, Pdf Viewer don't work anymore, everything fine on local and on mobile.
I'm getting the following exception in the console when I click on the back button of the app bar.

Steps to reproduce

1. Create new Flutter project with the following code
2. Compile release version
3. Deploy it to Firebase Hosting

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() {
  runApp(MaterialApp(
    title: 'Syncfusion PDF Viewer Demo',
    home: HomePage(),
  ));
}

/// Represents Homepage for Navigation
class HomePage extends StatefulWidget {
  @override
  _HomePage createState() => _HomePage();
}

class _HomePage extends State<HomePage> {
  final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.bookmark,
              color: Colors.white,
              semanticLabel: 'Bookmark',
            ),
            onPressed: () {
              _pdfViewerKey.currentState?.openBookmarkView();
            },
          ),
        ],
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        key: _pdfViewerKey,
      ),
    );
  }
}

Screenshots or Video

Stack Traces

Stack Traces

main.dart.js:8050 Uncaught Error: MissingPluginException(No implementation found for method closeDocument on channel syncfusion_flutter_pdfviewer)
    at Object.wrapException (main.dart.js:8050:43)
    at main.dart.js:241575:25
    at _wrapJsFunctionForAsync_closure.$protected (main.dart.js:11083:15)
    at _wrapJsFunctionForAsync_closure.call$2 (main.dart.js:124988:12)
    at _awaitOnObject_closure.call$1 (main.dart.js:124976:32)
    at _RootZone.runUnary$2$2 (main.dart.js:128175:18)
    at _Future__propagateToListeners_handleValueCallback.call$0 (main.dart.js:126197:51)
    at Object._Future__propagateToListeners (main.dart.js:11413:93)
    at _Future._completeWithValue$1 (main.dart.js:126027:9)
    at _Future__asyncCompleteWithValue_closure.call$0 (main.dart.js:126137:18)

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.24.3, on macOS 14.3.1 23D60 darwin-arm64, locale fr-FR)
    • Flutter version 3.24.3 on channel stable at /Users/user/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (5 weeks ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/user/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/user/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/user/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Users/user/lmdlm/../Downloads/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.93.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.98.0

[✓] Connected device (4 available)
    • iPhone 15 Pro (mobile)          • E0A2CEFF-2A50-4970-8544-A656771E6B88 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 14.3.1 23D60 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 14.3.1 23D60 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 129.0.6668.101
    ! Error: Browsing on the local area network for iPhone de Samy. Ensure the device is unlocked and attached with a cable or associated with the same local area network
      as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[immankumarsync]

@arioul89, we are unable to replicate the reported issue, and the document is loaded properly when the Flutter application is hosted in Firebase. Please find the hosted URL below.

URL: https://sfpdfviewer-web-sample.web.app/

Please share us the below information to help us replicate the issue.

1. syncfusion_flutter_pdfviewer package version
2. The browser in which the issue occurs

Could you please use the latest version of npm and firebase-tools and check whether the issue is resolved or not?

[StroeAndreX]

I’m currently facing this issue as well. In --release mode, the PDF fails to load, and the error message simply states: 'There was an error opening this document.' Additionally, the console throws the same Stack Traces.

However, everything works fine in debug mode

[KrithigaPerumal]

Hi @arioul89 ,

We are unable to replicate the reported issue, and the document is loaded properly when the Flutter application in release mode is hosted on Firebase. Please find the hosted URL below:
URL: https://pdfviewer-app-release.web.app/

Please find the code snippet used:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Syncfusion PDF Viewer Demo',
    home: MyHomePage(),
  ));
}

class PDFViewerPAge extends StatefulWidget {
  const PDFViewerPAge({super.key});

  @override
  State<PDFViewerPAge> createState() => _PDFViewerPAgeState();
}

class _PDFViewerPAgeState extends State<PDFViewerPAge> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ElevatedButton(
        child: Text('Test'),
        onPressed: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => PDFViewerHomePage()));
        },
      ),
    ));
  }
}

class PDFViewerHomePage extends StatefulWidget {
  const PDFViewerHomePage({super.key});

  @override
  State<PDFViewerHomePage> createState() => _PDFViewerHomePageState();
}

class _PDFViewerHomePageState extends State<PDFViewerHomePage> {
  final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
  final PdfViewerController _pdfViewerController = PdfViewerController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(
              Icons.arrow_back,
              color: Colors.black,
              semanticLabel: 'Back',
            ),
            onPressed: () {
              Navigator.pop(context); // Navigate back to the home screen
            },
          ),
          title: const Text('Syncfusion Flutter PDF Viewer'),
          actions: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.bookmark,
                color: Colors.black,
                semanticLabel: 'Bookmark',
              ),
              onPressed: () {
                _pdfViewerKey.currentState?.openBookmarkView();
              },
            ),
          ],
        ),
        body: SfPdfViewer.asset(
          'assets/flutter_succinctly.pdf',
          key: _pdfViewerKey,
          controller: _pdfViewerController,
        ));
  }
}

Here are the steps we followed to host the application successfully:
Run the flutter build web --release command to build the application in release mode.
Run the firebase login command to log in with your Firebase account.
Run the firebase init hosting command to initialize Firebase Hosting.
Run the firebase deploy command to deploy the application and generate the hosting URL.

Could you please confirm if you followed the steps above or provide any additional details regarding your hosting setup?

Also, help us replicate the issue and deliver a prompt solution could you please provide the following information?
1. A runnable sample in which the issue replicates.

Additionally, we suggest updating Firebase CLI tools to the latest version using the following command:
npm update -g firebase-tools

Regards,
Krithiga Perumal.

[Deepak1799]

@arioul89 As we have not heard back from you, we assume the information we have provided has resolved your problem satisfactorily. We are now closing this issue. If you encounter this issue again or need further assistance, please reopen this ticket by replying to this message or open a new issue for any related concerns.