membermatters / MemberMatters

An open source membership, access and payments portal for makerspaces and community groups.
https://membermatters.org
MIT License
50 stars 24 forks source link

Kiosk will not build #182

Closed proffalken closed 1 year ago

proffalken commented 2 years ago

Describe the bug

I'm trying to build the Kiosk UI as documented at https://membermatters.org/en/latest/GETTING_STARTED.html#kiosk-mode.

To Reproduce

$ cd membermatters/
$ git clone git@github.com:membermatters/MemberMatters.git src
$ cd src/
$ cd frontend/
$ npm install
$ npm run build
$ API_BASE_URL=http://localhost:8000 npm run build:electron

> frontend@3.0.0 build:electron
> quasar build -m electron

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 Build mode................ electron
 Pkg quasar................ v2.6.6
 Pkg @quasar/app-webpack... v3.5.1
 Pkg webpack............... v5
 Debugging................. no
 Publishing................ no

 Configured browser support (>= 84.95% of global marketshare):
 · Chrome for Android >= 100
 · Firefox for Android >= 99
 · Android >= 100
 · Chrome >= 91
 · Edge >= 97
 · Firefox >= 90
 · iOS >= 14.0-14.4
 · Opera >= 79
 · Safari >= 14.1

 App • Chaining "Renderer" Webpack config
 App • Extending "Renderer" Webpack config
 App • Cleaned build artifact: "/home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/dist/electron"
 App •  WAIT  • Compiling of "Preload" in progress...
 App •  WAIT  • Compiling of "Main" in progress...
 App •  WAIT  • Compiling of "Renderer" in progress...
(node:82995) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 App •  DONE  • "Preload" compiled with errors • 296ms

 App •  ERROR  •  Preload  

Module not found: Can't resolve imported dependency "/home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/src-electron/electron-preload"
Did you forget to install it? You can run: yarn add /home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/src-electron/electron-preload

 App •  COMPILATION FAILED  • Please check the log above for details.

 • Compiling:
 ├── Preload  ███████████████████  92% sealing asset processing TerserPlugin
 ├── Main     ███████████████████  92% sealing asset processing copy-webpack-plugin
 └── Renderer ███                  10% building 0/1 entries 0/0 dependencies 0/0 modules

$ node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

RpcIpcMessagePortClosedError: Cannot send the message - the message port has been closed for the process 83017.
    at /home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:47:47
    at processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: undefined,
  signal: undefined
}
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

RpcIpcMessagePortClosedError: Cannot send the message - the message port has been closed for the process 83011.
    at /home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:47:47
    at processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: undefined,
  signal: undefined
}

Expected behavior

I expect the node/electron Kiosk UI to build.

Screenshots

Desktop (please complete the following information):

Additional context

Ubuntu 22.04 npm 8.5.0 nodejs 16.14.2

jabelone commented 2 years ago

We haven't used the kiosk version for over a year now, so it's been a little neglected. I can take a look over the next few days and see what's broken. Looks like it's a dependency issue so hopefully not too big a deal!

proffalken commented 2 years ago

That's fair enough, appreciate the insight.

Tbh, the kiosk just looked like something cool to add to the platform, we're quite a way away from needing it for any other reason than tracking how often people attend as we only have one room and so if someone's in the space we can probably see them!

Would be great to be able to play with it though if it is as simple as a dep update.

proffalken commented 2 years ago

OK, so I found some more time to play with this and if I create the file frontend/src/electron-preload.js without any content, and then re-run it complains again:

 App •  DONE  • "Main" compiled with errors • 1671ms

 App •  ERROR  •  Main  

Module not found: Can't resolve imported dependency "/home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/src-electron/electron-main"
Did you forget to install it? You can run: yarn add /home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/src-electron/electron-main

 App •  COMPILATION FAILED  • Please check the log above for details.

So I symlink src-electron/main-process/electron-main.js to src-electron/electron-main.js, and uncommment the preload line, and now I get the following:

npm --trace run build:electron

> frontend@3.2.0 build:electron
> quasar build -m electron

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 Build mode................ electron
 Pkg quasar................ v2.8.3
 Pkg @quasar/app-webpack... v3.6.0
 Pkg webpack............... v5
 Debugging................. no
 Publishing................ no

 Configured browser support (>= 86.52% of global marketshare):
 · Chrome for Android >= 105
 · Firefox for Android >= 104
 · Android >= 105
 · Chrome >= 96
 · Edge >= 102
 · Firefox >= 95
 · iOS >= 15.2-15.3
 · Opera >= 87
 · Safari >= 15.2-15.3

 App • Chaining "Renderer" Webpack config
 App • Extending "Renderer" Webpack config
 App • Cleaned build artifact: "/home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/dist/electron"
 App •  WAIT  • Compiling of "Preload" in progress...
 App •  WAIT  • Compiling of "Main" in progress...
 App •  WAIT  • Compiling of "Renderer" in progress...
(node:26696) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/mmw/Projects/MakeMonmouth/membermatters/src/frontend/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 App •  DONE  • "Preload" compiled with success • 2291ms
 App •  DONE  • "Main" compiled with success • 4915ms
 App •  DONE  • "Renderer" compiled with errors • 31686ms

 App •  ERROR  •  Renderer  in ./node_modules/@quasar/extras/animate/fadeIn.css

ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
     - options.url should be one of these:
       boolean | object { filter? }
       -> Allows to enables/disables `url()`/`image-set()` functions handling.
       -> Read more at https://github.com/webpack-contrib/css-loader#url
       Details:
        * options.url should be a boolean.
        * options.url should be an object:
          object { filter? }

    - validate.js:105 validate
      [frontend]/[schema-utils]/dist/validate.js:105:11

    - NormalModule.js:585 Object.getOptions
      [frontend]/[webpack]/lib/NormalModule.js:585:19

 App •  COMPILATION FAILED  • Please check the log above for details.
proffalken commented 1 year ago

Just coming back to this and wondering if you had a chance to look at it?

I'm seeing the same error still when following the commands to build at https://membermatters.org/en/latest/GETTING_STARTED.html#kiosk-mode

If I just run npm run build, then I get a long list of errors starting with:

App •  WAIT  • Compiling of "UI" in progress...
 App •  DONE  • "UI" compiled with errors • 114180ms

 App •  ERROR  •  UI  in src/components/Account/RegistrationCard.vue:179:14

TS2339: Property 'loggedIn' does not exist on type '{ name: string; mixins: { methods: { validateEmail(email: string): boolean; validateNotEmpty(value: string): boolean; validatePassword(value: string): boolean; validateMatchingField(current: string, newField: string): boolean; validateFutureDate(date: string): boolean; validateFutureTime(time: string): boolean; vali...'.
    177 |   },
    178 |   mounted() {
  > 179 |     if (this.loggedIn) this.$router.push({ name: "dashboard" });
        |              ^^^^^^^^
    180 |   },
    181 |   computed: {
    182 |     ...mapGetters("profile", ["loggedIn"]),

This isn't massively urgent, but it would be nice to get this up and running so we can have it on a small screen attached to a Pi or similar by the door.

jabelone commented 1 year ago

As mentioned on Discord, the build issue should be fixed now (in the latest dev branch commit). However, the kiosk mode hasn't been thought about in several years so you may find problems with it, if you do, please open a GitHub issue. 🙂