TypeError: appImpl.storage is not a function when trying to upload a file to firebase cloud storage

Question

I am trying to upload a file to Firebase storage but I keep getting the error

 TypeError: appImpl.storage is not a function
at Object.getStorageInstance (http://localhost:61661/packages/firebase_storage_web/src/interop/storage.dart.lib.js:739:65)
at new firebase_storage_web.FirebaseStorageWeb.new (http://localhost:61661/packages/firebase_storage_web/src/reference_web.dart.lib.js:248:33)
at firebase_storage_web.FirebaseStorageWeb._nullInstance.delegateFor (http://localhost:61661/packages/firebase_storage_web/src/reference_web.dart.lib.js:203:14)
at Function.instanceFor (http://localhost:61661/packages/firebase_storage_platform_interface/src/platform_interface/platform_interface_task_snapshot.dart.lib.js:870:83)
at firebase_storage.FirebaseStorage.__.get [_delegate] (http://localhost:61661/packages/firebase_storage/firebase_storage.dart.lib.js:85:120)
at firebase_storage.FirebaseStorage.__.ref (http://localhost:61661/packages/firebase_storage/firebase_storage.dart.lib.js:125:58)
at importFile (http://localhost:61661/packages/denance/data_management.dart.lib.js:4737:53)
at importFile.next (<anonymous>)
at http://localhost:61661/dart_sdk.js:37445:33
at _RootZone.runUnary (http://localhost:61661/dart_sdk.js:37316:59)
at _FutureListener.thenAwait.handleValue (http://localhost:61661/dart_sdk.js:32551:29)
at handleValueCallback (http://localhost:61661/dart_sdk.js:33078:49)
at Function._propagateToListeners (http://localhost:61661/dart_sdk.js:33116:17)
at _Future.new.[_completeWithValue] (http://localhost:61661/dart_sdk.js:32964:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:61661/dart_sdk.js:32985:35)
at Object._microtaskLoop (http://localhost:61661/dart_sdk.js:37568:13)
at _startMicrotaskLoop (http://localhost:61661/dart_sdk.js:37574:13)
at http://localhost:61661/dart_sdk.js:33324:9

am not sure what this error is, this is my code implementation

 Future importFile() async {


    FilePickerResult ? result = await FilePicker.platform.pickFiles();

    if (result != null) {
        Uint8List fileBytes = result.files.first.bytes!;
        String fileName = result.files.first.name;

        FirebaseStorage storage = FirebaseStorage.instance;


        // Upload file
        await storage.ref('bigquery/$fileName').putData(fileBytes);
    }

this is my packag.json for reference

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
 
dev_dependencies:
  flutter_test:
    sdk: flutter
    
  http: ^0.13.3 
  cloud_firestore: ^2.3.0
  firebase_core: ^1.2.0
  flutter_staggered_grid_view: ^0.4.0
  syncfusion_flutter_charts: ^19.2.46
  random_string_generator: ^2.0.0
  file_picker: ^3.0.3
  firebase_storage: ^10.0.1 

  flutter_svg: ^0.22.0

................................................................................................................................................................................................................................................................

Solution

You have to import the js file like a

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>

you can see it here flutter web TypeError: dart.global.firebase.storage is not a function