Help Required For Webpack Please

Photoshop UXP Plugin API
1

Objective:
I am trying to get a UXP plugin to store data on a Firebase Database.

Issues:
Having read all the docs and followed the instructions on installing Firebase using npm I am falling at the first fence.

To initialize Firebase you have to add something like this…

import {
  initializeApp
} from 'firebase/app';

Now this is throwing an error in the console … Cannot use import statement outside a module

After digging around, I realize that Import is not allowed in UXP and Webpack is needed, which is where I am completely stuck.

I have or at least I think I have installed Webpack by using npm install webpack --save-dev which has been detected by the pacjage.json file

{
  "name": "uxp-template-ps-starter",
  "version": "1.0.0",
  "description": "Starter template for creating Adobe UXP based photoshop plugin.",
  "author": "Adobe Inc",
  "license": "Apache-2.0",
  "devDependencies": {
    "webpack": "^5.53.0"
  },
  "dependencies": {
    "firebase": "^9.0.2"
  }
}

I am not sure how to proceed from here. All the docs I have read are for regular html useage and not UXP.

If anyone is prepared to walk me through getting this working, it would be extremely appreciated.

2

With UXP instead of import try using require syntax (something related to some versions IIRC - was looking into this when started using Webpack)

const {someVar} = require('some/app');