Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft migration to Nuxt 3 - not ready yet #3571

Closed
wants to merge 150 commits into from
Closed

Conversation

obulat
Copy link
Contributor

@obulat obulat commented Dec 21, 2023

Fixes

Fixes #[issue number] by @[issue author]

Description

This is still WIP. You can run the app locally using jf dev:only. Note: don't run jf dev because that would download the locales which have some illegal keys, i.e. {creator-name} instead of {creatorName} which are not caught and converted for some reason. These keys break the build.

It mostly works. Things that don't:
The mobile content switcher modal (the menu button) causes a warning about using runtime directives on a non-element, and is slow.

Testing does not work. The Playwright build fails with:

 ✔ Container frontend-playwright-1  Recreated                                                                                                                                                                            0.1s 
Attaching to playwright-1
playwright-1  | 
playwright-1  | > @openverse/frontend@2.2.1 test:playwright:local /frontend
playwright-1  | > playwright test -c test/playwright
playwright-1  | 
playwright-1  | 2023-12-21T14:41:00.164Z pw:webserver Starting WebServer process ./node_modules/.bin/npm-run-all -p -r talkback prod:playwright...
playwright-1  | 2023-12-21T14:41:00.171Z pw:webserver Process started
playwright-1  | 2023-12-21T14:41:00.171Z pw:webserver Waiting for availability...
playwright-1  | 2023-12-21T14:41:00.173Z pw:webserver Waiting 100ms
playwright-1  | 2023-12-21T14:41:00.275Z pw:webserver Waiting 250ms
playwright-1  | 2023-12-21T14:41:00.526Z pw:webserver Waiting 500ms
playwright-1  | [WebServer] 
playwright-1  | > @openverse/frontend@2.2.1 prod:playwright /frontend
playwright-1  | > pnpm i18n:copy-test-locales && pnpm prod
playwright-1  | 
playwright-1  | [WebServer] 
playwright-1  | > @openverse/frontend@2.2.1 talkback /frontend
playwright-1  | > node ./test/proxy.js
playwright-1  | 
playwright-1  | 2023-12-21T14:41:01.030Z pw:webserver Waiting 1000ms
playwright-1  | [WebServer] 
playwright-1  | > @openverse/frontend@2.2.1 i18n:copy-test-locales /frontend
playwright-1  | > cp -r test/locales/* src/locales/
playwright-1  | 
playwright-1  | [WebServer] 
playwright-1  | > @openverse/frontend@2.2.1 prod /frontend
playwright-1  | > pnpm build:only && pnpm start
playwright-1  | 
playwright-1  | [WebServer] 
playwright-1  | > @openverse/frontend@2.2.1 build:only /frontend
playwright-1  | > nuxt build
playwright-1  | 
playwright-1  | 2023-12-21T14:41:02.032Z pw:webserver Waiting 1000ms
playwright-1  | [WebServer] Nuxt 3.8.2 with Nitro 2.8.1
playwright-1  | 2023-12-21T14:41:03.034Z pw:webserver Waiting 1000ms
playwright-1  | [WebServer] 
playwright-1  |  ERROR  Cannot find module @rollup/rollup-linux-arm64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory.
playwright-1  | 
playwright-1  |   at requireWithFriendlyError (/node_modules/.pnpm/rollup@4.8.0/node_modules/rollup/dist/native.js:87:9)
playwright-1  |   at Object.<anonymous> (/node_modules/.pnpm/rollup@4.8.0/node_modules/rollup/dist/native.js:96:48)
playwright-1  |   at Module._compile (node:internal/modules/cjs/loader:1376:14)
playwright-1  |   at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
playwright-1  |   at Module.load (node:internal/modules/cjs/loader:1207:32)
playwright-1  |   at Module._load (node:internal/modules/cjs/loader:1023:12)
playwright-1  |   at cjsLoader (node:internal/modules/esm/translators:345:17)
playwright-1  |   at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:294:7)
playwright-1  |   at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
playwright-1  |   at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) 
playwright-1  | 
playwright-1  | 
playwright-1  | [WebServer] 
playwright-1  |  ERROR  Cannot find module @rollup/rollup-linux-arm64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory.

I tried to set up the nuxt/test-utils that use Vitest under the hood, but couldn't get the module mocking and wrapper components to work. There is also an error when i18n-t component is not recognized, so the tests for components that contain it (most do!) fail.

@sarayourfriend, do you have any idea on how we could fix the Playwright build?

By the way, I replaced the tsconfig.base with the tsconfig that's generated by Nuxt because it generates some paths for the #app and #imports. If we extend the base config using another tsconfig with paths property, those get overwritten.

Testing Instructions

Checklist

  • My pull request has a descriptive title (not a vague title likeUpdate index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.
  • I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@openverse-bot openverse-bot added the 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work label Dec 21, 2023
@github-actions github-actions bot added 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend labels Dec 21, 2023
@obulat obulat added 🟧 priority: high Stalls work on the project or its dependents 💻 aspect: code Concerns the software code in the repository 🧰 goal: internal improvement Improvement that benefits maintainers, not users and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🧱 stack: documentation Related to Sphinx documentation labels Dec 21, 2023
@obulat obulat force-pushed the update/nuxt3_Dec18 branch 3 times, most recently from 73fba53 to e09dbf3 Compare December 21, 2023 17:47
@sarayourfriend
Copy link
Collaborator

By the way, I replaced the tsconfig.base with the tsconfig that's generated by Nuxt because it generates some paths for the #app and #imports. If we extend the base config using another tsconfig with paths property, those get overwritten.

This is my least favourite decision from Nuxt 3 (along with implicit imports, which the generated tsconfig also is meant to support), but I need to look more into how people are dealing with this in a monorepo setting. It's baffling to me that this works for people, it's so much dependency on the build to generate a valid TypeScript configuration, which feels backwards to me in every single way.

I'll review this PR today and see if I can understand the issue inside the playright container. Off the top of my head, I'm wondering if I'll even run into this because I'm not running an ARM CPU. Just based on the name of the package that can't be loaded, my first hunch is that it's something related to arm64 vs amd64 Docker (but who knows!)

@sarayourfriend
Copy link
Collaborator

@obulat Have you tried this, by any chance? vitejs/vite#15167

@sarayourfriend
Copy link
Collaborator

Okay WOW the build is SO FAST 🤯

@sarayourfriend
Copy link
Collaborator

Just copying out the warnings I'm seeing locally in case they aren't known yet:

[1:23:14 pm]  WARN  Plugin /var/home/sara/projects/openverse/frontend/src/plugins/polyfills.client.ts has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin.


[1:23:14 pm]  WARN  Plugin /var/home/sara/projects/openverse/frontend/src/plugins/focus-visible.client.ts has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin.


 WARN  files in the public directory are served at the root path.                                                           1:23:15 pm
Instead of /public/svg/sprite/icons.svg, use /svg/sprite/icons.svg.


 WARN  files in the public directory are served at the root path.                                                           1:23:15 pm
Instead of /public/svg/sprite/images.svg, use /svg/sprite/images.svg.


 WARN  Assets in public directory cannot be imported from JavaScript.                                                       1:23:18 pm
If you intend to import that asset, put the file in the src directory, and use /src/svg/sprite/images.svg instead of /public/svg/sprite/images.svg.
If you intend to use the URL of that asset, use /svg/sprite/images.svg?url.


 WARN  Assets in public directory cannot be imported from JavaScript.                                                       1:23:18 pm
If you intend to import that asset, put the file in the src directory, and use /src/svg/sprite/icons.svg instead of /public/svg/sprite/icons.svg.
If you intend to use the URL of that asset, use /svg/sprite/icons.svg?url.

@sarayourfriend
Copy link
Collaborator

I get a totally different issue running Playwright locally:

^C%                                                                                                                                     ➜  openverse git:(update/nuxt3_Dec18) just p frontend test:playwright
pnpm --filter frontend run test:playwright 

> @openverse/frontend@2.2.1 test:playwright /var/home/sara/projects/openverse/frontend
> ./bin/playwright.sh


> @openverse/frontend@2.2.1 i18n:get-translations /var/home/sara/projects/openverse/frontend
> node src/locales/scripts/get-translations "--en-only"

Successfully saved English translation to en.json.
Running Playwright v1.40.1 as 1000 with Playwright arguments  under package manager pnpm@8.3.1
[+] Building 108.9s (10/11)                                                                                              docker:default
 => [playwright internal] load build definition from Dockerfile.playwright                                                         0.0s
 => => transferring dockerfile: 437B                                                                                               0.0s
 => [playwright internal] load .dockerignore                                                                                       0.0s
 => => transferring context: 490B                                                                                                  0.0s
 => [playwright] resolve image config for docker.io/docker/dockerfile:1                                                            3.1s
 => CACHED [playwright] docker-image://docker.io/docker/dockerfile:1@sha256:ac85f380a63b13dfcefa89046420e1781752bab202122f8f50032  0.0s
 => [playwright internal] load metadata for mcr.microsoft.com/playwright:v1.40.1-jammy                                             0.7s
 => [playwright internal] load build context                                                                                       0.0s
 => => transferring context: 6.18kB                                                                                                0.0s
 => [playwright 1/5] FROM mcr.microsoft.com/playwright:v1.40.1-jammy@sha256:1aba528f5db4f4c130653ed1de737ddc1d276197cc4503d3bb79  59.8s
 => => resolve mcr.microsoft.com/playwright:v1.40.1-jammy@sha256:1aba528f5db4f4c130653ed1de737ddc1d276197cc4503d3bb7903a93b7fb32e  0.0s
 => => sha256:1aba528f5db4f4c130653ed1de737ddc1d276197cc4503d3bb7903a93b7fb32e 743B / 743B                                         0.0s
 => => sha256:bdcf736240e565a7596b1dfe9b10fe4c9c7644268d2fd03c26214c8d9e00a325 1.17kB / 1.17kB                                     0.0s
 => => sha256:9a9296d96520ae634880855db01708cdcf5ad6e04dac988651b452e97736ca9c 4.28kB / 4.28kB                                     0.0s
 => => sha256:43f89b94cd7df92a2f7e565b8fb1b7f502eff2cd225508cbd7ea2d36a9a3a601 30.44MB / 30.44MB                                  32.5s
 => => sha256:4f114e38a0a97bee1291a9a6795ac4ae3afb097f293624e83581cd760a78bfe6 88.67MB / 88.67MB                                  11.5s
 => => sha256:f76ba5545dab67c3f5db70de1c9e7a648ff609d0e5c66a36276036208e435142 1.80MB / 1.80MB                                     1.9s
 => => sha256:9aef38e1b9647496e0f781f1f1356433e0411f1a15cda8ada86732dcb5dfd449 576.33MB / 576.33MB                                53.6s
 => => extracting sha256:43f89b94cd7df92a2f7e565b8fb1b7f502eff2cd225508cbd7ea2d36a9a3a601                                          0.4s
 => => extracting sha256:4f114e38a0a97bee1291a9a6795ac4ae3afb097f293624e83581cd760a78bfe6                                          1.4s
 => => extracting sha256:f76ba5545dab67c3f5db70de1c9e7a648ff609d0e5c66a36276036208e435142                                          0.0s
 => => extracting sha256:9aef38e1b9647496e0f781f1f1356433e0411f1a15cda8ada86732dcb5dfd449                                          6.0s
 => [playwright 2/5] COPY package.json .                                                                                           2.4s
 => [playwright 3/5] RUN npm install -g pnpm@8.3.1                                                                                 1.9s
 => ERROR [playwright 4/5] RUN pnpm install                                                                                       40.8s
------                                                                                                                                  
 > [playwright 4/5] RUN pnpm install:                                                                                                   
0.708 Progress: resolved 1, reused 0, downloaded 0, added 0                                                                             
0.724                                                                                                                                   
0.724    ╭──────────────────────────────────────────────────────────────────╮                                                           
0.724    │                                                                  │                                                           
0.724    │                Update available! 8.3.1 → 8.12.1.                 │
0.724    │   Changelog: https://github.com/pnpm/pnpm/releases/tag/v8.12.1   │
0.724    │                Run "pnpm add -g pnpm" to update.                 │
0.724    │                                                                  │
0.724    │      Follow @pnpmjs for updates: https://twitter.com/pnpmjs      │
0.724    │                                                                  │
0.724    ╰──────────────────────────────────────────────────────────────────╯
0.724 
1.710 Progress: resolved 3, reused 0, downloaded 2, added 0
2.711 Progress: resolved 8, reused 0, downloaded 5, added 0
3.711 Progress: resolved 26, reused 0, downloaded 19, added 0
4.710 Progress: resolved 47, reused 0, downloaded 39, added 0
5.712 Progress: resolved 59, reused 0, downloaded 55, added 0
6.712 Progress: resolved 71, reused 0, downloaded 69, added 0
7.168  WARN  deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
7.712 Progress: resolved 103, reused 0, downloaded 98, added 0
8.713 Progress: resolved 127, reused 0, downloaded 120, added 0
9.714 Progress: resolved 142, reused 0, downloaded 137, added 0
10.71 Progress: resolved 165, reused 0, downloaded 158, added 0
11.72 Progress: resolved 182, reused 0, downloaded 171, added 0
12.72 Progress: resolved 231, reused 0, downloaded 219, added 0
13.72 Progress: resolved 267, reused 0, downloaded 251, added 0
14.72 Progress: resolved 322, reused 0, downloaded 304, added 0
15.72 Progress: resolved 339, reused 0, downloaded 319, added 0
16.72 Progress: resolved 383, reused 0, downloaded 352, added 0
17.72 Progress: resolved 415, reused 0, downloaded 390, added 0
18.72 Progress: resolved 430, reused 0, downloaded 403, added 0
19.72 Progress: resolved 491, reused 0, downloaded 458, added 0
20.72 Progress: resolved 505, reused 0, downloaded 475, added 0
21.72 Progress: resolved 538, reused 0, downloaded 500, added 0
22.72 Progress: resolved 608, reused 0, downloaded 571, added 0
23.72 Progress: resolved 632, reused 0, downloaded 592, added 0
24.72 Progress: resolved 654, reused 0, downloaded 597, added 0
25.72 Progress: resolved 693, reused 0, downloaded 620, added 0
26.72 Progress: resolved 756, reused 0, downloaded 675, added 0
27.72 Progress: resolved 814, reused 0, downloaded 730, added 0
28.72 Progress: resolved 858, reused 0, downloaded 771, added 0
29.72 Progress: resolved 914, reused 0, downloaded 827, added 0
30.72 Progress: resolved 946, reused 0, downloaded 856, added 0
31.72 Progress: resolved 1038, reused 0, downloaded 941, added 0
32.72 Progress: resolved 1101, reused 0, downloaded 1001, added 0
33.72 Progress: resolved 1130, reused 0, downloaded 1029, added 0
34.72 Progress: resolved 1214, reused 0, downloaded 1074, added 0
35.72 Progress: resolved 1294, reused 0, downloaded 1147, added 0
36.72 Progress: resolved 1333, reused 0, downloaded 1249, added 0
37.40 Packages: +1306
37.40 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
37.72 Progress: resolved 1356, reused 0, downloaded 1289, added 0
37.73 Packages are cloned from the content-addressable store to the virtual store.
37.73   Content-addressable store is at: /root/.local/share/pnpm/store/v3
37.73   Virtual store is at:             node_modules/.pnpm
38.72 Progress: resolved 1356, reused 0, downloaded 1290, added 1223
39.02 .../core-js@3.34.0/node_modules/core-js postinstall$ node -e "try{require('./postinstall')}catch(e){}"
39.03 .../@intlify/vue-i18n-bridge postinstall$ node ./scripts/postinstall.js
39.03 .../node_modules/vue-demi postinstall$ node ./scripts/postinstall.js
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: The project needs your help! Please consider supporting core-js:
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: > https://opencollective.com/core-js 
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: > https://patreon.com/zloirock 
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: > https://boosty.to/zloirock 
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz 
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: I highly recommend reading this: https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md 
39.05 .../core-js@3.34.0/node_modules/core-js postinstall: Done
39.08 .../@intlify/vue-i18n-bridge postinstall: [vue-i18n-bridge]  start vue-i18n-bridge postinstall script
39.14 .../@intlify/vue-i18n-bridge postinstall: Done
39.14 .../node_modules/vue-demi postinstall: Done
39.31 .../esbuild@0.19.10/node_modules/esbuild postinstall$ node install.js
39.31 .../@intlify/vue-router-bridge postinstall$ node ./scripts/postinstall.js
39.32 .../esbuild@0.18.20/node_modules/esbuild postinstall$ node install.js
39.36 .../esbuild@0.19.10/node_modules/esbuild postinstall: Done
39.37 .../esbuild@0.18.20/node_modules/esbuild postinstall: Done
39.40 .../@intlify/vue-router-bridge postinstall: Done
39.76 Progress: resolved 1356, reused 0, downloaded 1290, added 1306, done
40.18 
40.18 > @openverse/frontend@2.2.1 postinstall /
40.18 > pnpm i18n:copy-test-locales && npx nuxi prepare
40.18 
40.47 
40.47 > @openverse/frontend@2.2.1 i18n:copy-test-locales /
40.47 > cp -r test/locales/* src/locales/
40.47 
40.47 cp: cannot stat 'test/locales/*': No such file or directory
40.48  ELIFECYCLE  Command failed with exit code 1.
40.49  ELIFECYCLE  Command failed with exit code 1.
------
failed to solve: process "/bin/sh -c pnpm install" did not complete successfully: exit code: 1
/var/home/sara/projects/openverse/frontend:

Looking into it now.

@sarayourfriend
Copy link
Collaborator

sarayourfriend commented Dec 22, 2023

Okay, I've got playwright running locally (tests fail though). Took a lot of fiddling and debugging stuff. There are a whole lot of tiny little differences and details to how Nuxt 3 and Nitro work that took quite some time to sort through.

Pushed changes for that to this branch. Next up, I'm going to get ESLint working 🙂

@sarayourfriend
Copy link
Collaborator

ESLint configuration is fixed in the latest commit too now 🙂

@obulat obulat force-pushed the update/nuxt3_Dec18 branch 10 times, most recently from b66b20d to cd29b1e Compare December 29, 2023 05:58
obulat added 25 commits January 5, 2024 16:11
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
@obulat obulat force-pushed the update/nuxt3_Dec18 branch from d185855 to cbe4eb1 Compare January 5, 2024 13:14
Copy link

github-actions bot commented Jan 5, 2024

Playwright failure test results: https://github.com/WordPress/openverse/actions/runs/7422288778

It looks like some of the Playwright tests failed. You can download the trace output and image diffs for the failed tests under the "Artifacts" section in the above page.

You can read the docs on how to use this artifact.

If the test is flaky, follow the flaky test triage procedure.

@AetherUnbound
Copy link
Collaborator

Closing this in lieu of #3646

@AetherUnbound AetherUnbound deleted the update/nuxt3_Dec18 branch January 26, 2024 19:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💻 aspect: code Concerns the software code in the repository 🧰 goal: internal improvement Improvement that benefits maintainers, not users 🟧 priority: high Stalls work on the project or its dependents 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

4 participants