Upgrade to nuxt 3 stable, remove histoire #75

zoey-kaiser · 2022-11-14T16:04:17Z

Closes nuxt/framework#50
Contributes to nuxt/framework#65

The upgrade and removal of historie went successfully. However afterwards I have now run into the issue that the type CompatibilityEvent and CompatibilityEventHandler do not exist within the h3 package. I did some googling about these types and also found no documentation on them. Any tips @BracketJohn?

BracketJohn · 2022-11-14T16:10:21Z

try H3Event! It superceeded CompabitlityEvent, which was deprecated.

Please make sure to go through the recent 3 releases and adapt our code to all changes that you can find. E.g., this change is a bit hidden as part of rc.12. To find it you have to see that:

breaking h3 upgrade announced as part of release notes: https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.12
the h3 release notes say to use eventHandler, which has a different event type: https://github.com/unjs/h3/releases/tag/v0.8.0

zoey-kaiser · 2022-11-14T17:18:46Z

I updated nuxt-parse to use the new version of h3. I do not get errors in my editor anymore, however many tests are starting to fail. I do not have any quick ideas on how to fix this. I hate to ask again, but @BracketJohn do you have a start point for me?

I went through the nuxt update logs and found this change to vitest: nuxt/framework#8325

Could this be the issue?

BracketJohn · 2022-11-14T17:21:41Z

ok so tbh my starting point would be: ditch the way we've written api tests until now and introduce https://v3.nuxtjs.org/getting-started/testing -> this is also a recent additon and would allow us to strip supertest, a lot of the hacky setup files, ... from this starter. Do you think you're up for the challenge?

zoey-kaiser · 2022-11-14T17:22:38Z

ok so tbh my starting point would be: ditch the way we've written api tests until now and introduce https://v3.nuxtjs.org/getting-started/testing -> this is also a recent additon and would allow us to strip supertest, a lot of the hacky setup files, ... from this starter. Do you think you're up for the challenge?

Ill take a shot at it right now! If I notice that I am struggling I will let you know in the morning and we should still have enough time to finish this PR!

BracketJohn · 2022-11-15T07:12:29Z

I've had a look at this.

First I also tried leanly to use native-nuxt-testing, but this always failed with INVALID URL SCHEME, I had an approach to solve this by checking all used URIs, but this approach is indeterministic and may take some time.

So I then switched to actually resolving the current problem without introducing big changes: That was easy -> the error is app.address() is undefined. This is due to .address() only existing on a node-app, not on an h3-app. This must've existed in the past but then removed with one of the latest releases. Checking out their own tests, we see how they resolve it: wrap app in toNodeListener(app), see https://github.com/unjs/h3/blob/501f0c6e623ea827d47691046f3c7319f5ac4651/test/proxy.test.ts

Tests are passing now 🎊

server/api/example/[id].get.ts

BracketJohn

The following does not work, please fix ASAP

❯ npm run build

> build
> nuxi build

Nuxi 3.0.0-rc.13                                                                                                                                                                                            15:42:41
Nuxt 3.0.0-rc.13 with Nitro 0.6.1                                                                                                                                                                           15:42:41
ℹ Using default Tailwind CSS file from runtime/tailwind.css                                                                                                                                nuxt:tailwindcss 15:42:42
ℹ Client built in 3470ms                                                                                                                                                                                    15:42:46
ℹ Building server...                                                                                                                                                                                        15:42:46
✔ Server built in 2930ms                                                                                                                                                                                    15:42:49
✔ Generated public .output/public                                                                                                                                                                     nitro 15:42:49
ℹ Building Nitro Server (preset: node-server)                                                                                                                                                         nitro 15:42:49

 WARN  Multiple major versions of package supports-color are being externalized. Picking latest version:                                                                                                    15:42:52

  + /Users/nils/repos/sidebase/sidebase/node_modules/typeorm/node_modules/supports-color@7.2.0
  - /Users/nils/repos/sidebase/sidebase/node_modules/supports-color@5.5.0


 WARN  Multiple major versions of package parse5 are being externalized. Picking latest version:                                                                                                            15:42:52

  - /Users/nils/repos/sidebase/sidebase/node_modules/cli-highlight/node_modules/parse5@5.1.1
  + /Users/nils/repos/sidebase/sidebase/node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5@6.0.1


 WARN  Multiple major versions of package parse5 are being externalized. Picking latest version:                                                                                                            15:42:52

  + /Users/nils/repos/sidebase/sidebase/node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5@6.0.1
  - /Users/nils/repos/sidebase/sidebase/node_modules/cli-highlight/node_modules/parse5@5.1.1


 WARN  Multiple major versions of package has-flag are being externalized. Picking latest version:                                                                                                          15:42:52

  + /Users/nils/repos/sidebase/sidebase/node_modules/typeorm/node_modules/has-flag@4.0.0
  - /Users/nils/repos/sidebase/sidebase/node_modules/has-flag@3.0.0


 WARN  Multiple major versions of package semver are being externalized. Picking latest version:                                                                                                            15:42:52

  + /Users/nils/repos/sidebase/sidebase/node_modules/@mapbox/node-pre-gyp/node_modules/semver@7.3.8
  - /Users/nils/repos/sidebase/sidebase/node_modules/semver@6.3.0


 WARN  Multiple major versions of package npmlog are being externalized. Picking latest version:                                                                                                            15:42:52

  - /Users/nils/repos/sidebase/sidebase/node_modules/npmlog@5.0.1
  + /Users/nils/repos/sidebase/sidebase/node_modules/node-gyp/node_modules/npmlog@6.0.2


 WARN  Multiple major versions of package are-we-there-yet are being externalized. Picking latest version:                                                                                                  15:42:52

  - /Users/nils/repos/sidebase/sidebase/node_modules/are-we-there-yet@2.0.0
  + /Users/nils/repos/sidebase/sidebase/node_modules/node-gyp/node_modules/are-we-there-yet@3.0.1


 WARN  Multiple major versions of package gauge are being externalized. Picking latest version:                                                                                                             15:42:52

  - /Users/nils/repos/sidebase/sidebase/node_modules/gauge@3.0.2
  + /Users/nils/repos/sidebase/sidebase/node_modules/node-gyp/node_modules/gauge@4.0.4

✔ Nitro server built                                                                                                                                                                                  nitro 15:42:52
  ├─ .output/server/package.json (3.35 kB) (1.26 kB gzip)
  ├─ .output/server/index.mjs (572 B) (302 B gzip)
  ├─ .output/server/chunks/nitro/node-server.mjs.map (83.4 kB) (6.32 kB gzip)
  ├─ .output/server/chunks/nitro/node-server.mjs (25.6 kB) (7.55 kB gzip)
  ├─ .output/server/chunks/index.mjs.map (277 B) (192 B gzip)
  ├─ .output/server/chunks/index.mjs (693 B) (355 B gzip)
  ├─ .output/server/chunks/healthz.get.mjs.map (602 B) (320 B gzip)
  ├─ .output/server/chunks/healthz.get.mjs (997 B) (528 B gzip)
  ├─ .output/server/chunks/handlers/renderer.mjs.map (19.8 kB) (3.44 kB gzip)
  ├─ .output/server/chunks/handlers/renderer.mjs (15.9 kB) (4.91 kB gzip)
  ├─ .output/server/chunks/error-500.mjs.map (1.06 kB) (379 B gzip)
  ├─ .output/server/chunks/error-500.mjs (4.26 kB) (1.83 kB gzip)
  ├─ .output/server/chunks/app/styles.mjs.map (383 B) (217 B gzip)
  ├─ .output/server/chunks/app/styles.mjs (420 B) (243 B gzip)
  ├─ .output/server/chunks/app/server.mjs.map (45.8 kB) (6.97 kB gzip)
  ├─ .output/server/chunks/app/server.mjs (37.9 kB) (9.6 kB gzip)
  ├─ .output/server/chunks/app/client.manifest.mjs.map (2.49 kB) (486 B gzip)
  ├─ .output/server/chunks/app/client.manifest.mjs (3.37 kB) (612 B gzip)
  ├─ .output/server/chunks/app/_nuxt/index.208c0c95.mjs.map (269 kB) (44.1 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/index.208c0c95.mjs (253 kB) (55.3 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/error-component.e499347b.mjs.map (2.35 kB) (803 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-component.e499347b.mjs (2.01 kB) (894 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500.5a83d237.mjs.map (1.7 kB) (613 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500.5a83d237.mjs (3.32 kB) (1.46 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500-styles.ad145178.mjs.map (366 B) (224 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-500-styles.ad145178.mjs (2.22 kB) (864 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404.1a84ca10.mjs.map (2.34 kB) (786 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404.1a84ca10.mjs (4.17 kB) (1.75 kB gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404-styles.3db9fdd2.mjs.map (366 B) (224 B gzip)
  ├─ .output/server/chunks/app/_nuxt/error-404-styles.3db9fdd2.mjs (3.92 kB) (1.25 kB gzip)
  ├─ .output/server/chunks/_id_.patch.mjs.map (717 B) (358 B gzip)
  ├─ .output/server/chunks/_id_.patch.mjs (1.08 kB) (507 B gzip)
  ├─ .output/server/chunks/_id_.get.mjs.map (540 B) (302 B gzip)
  └─ .output/server/chunks/_id_.get.mjs (874 B) (448 B gzip)
Σ Total size: 13.7 MB (4.03 MB gzip)
✔ You can preview this build using node .output/server/index.mjs

❯ npm run start

> start
> NODE_ENV=production node .output/server/index.mjs

node:internal/modules/cjs/loader:353
      const err = new Error(
                  ^

Error: Cannot find module '/Users/nils/repos/sidebase/sidebase/.output/server/node_modules/parse5/lib/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:353:19)
    at Function.Module._findPath (node:internal/modules/cjs/loader:566:18)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/nils/repos/sidebase/sidebase/.output/server/node_modules/cli-highlight/dist/index.js:30:27)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/nils/repos/sidebase/sidebase/.output/server/node_modules/parse5/package.json',
  requestPath: 'parse5'
}

one solution can be to install explicit versions of the problematic package (here: parse5). It would be nice to find a nicer solution / the actual cause for this though.

In the next iteration please make sure to test these commands yourzself to ensure that it works!

zoey-kaiser · 2022-11-15T15:17:36Z

one solution can be to install explicit versions of the problematic package (here: parse5). It would be nice to find a nicer solution / the actual cause for this though.

I tried installing parse5, but the error still occurs!

zoey-kaiser · 2022-11-15T15:54:44Z

I have also attempted to regenerate the package-lock.json, but it sadly did not resolve the issue as well.

valiafetisov · 2022-11-15T17:42:35Z

Had a look into it for ~75 minutes. My conclusions: the error is coming either from nitro. The warning
Multiple major versions of package ... are being externalized is only mentioned in nuxt/framework repo:

And either unresolved or solved by npx nuxi upgrade --force (which doesn't help in our case)

So the problem boils down to:

$ cat .output/server/node_modules/parse5/package.json | jq '.version, .main' 
"6.0.1"
"./lib/index.js"

$ cat node_modules/parse5/package.json | jq '.version, .main'
"7.1.1"
"dist/cjs/index.js"

The dirty workaround is proposed here: nuxt/nuxt#14761 – to basically manually fix invalid main entries. Which I'm not sure will help us since built .output/server/node_modules/parse5/ is missing any kind of index.js:

$ tree .output/server/node_modules/parse5/ 
├── lib
│   └── common
│       ├── doctype.js
│       └── html.js
└── package.json

One other think we can try, is to upgrade to RC14 which is not yet published but prepared in a branch in the hopes that it is fixed there.

valiafetisov · 2022-11-15T17:47:07Z

Maybe https://stackoverflow.com/a/74213192 will help nitro to properly build?

zoey-kaiser · 2022-11-15T18:50:28Z

One other think we can try, is to upgrade to RC14 which is not yet published but prepared in a branch in the hopes that it is fixed there.

I upgraded to the edge channel of RC14, but it sadly also did not resolve our issue 😢

zoey-kaiser · 2022-11-16T10:38:30Z

Maybe https://stackoverflow.com/a/74213192 will help nitro to properly build?

I have also attempted to add this solution to our package.json. While it did resolve the first error (maybe) it threw a new error:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/common/doctype' is not defined by "exports" in /Users/zoey/Documents/Development/SideStream/sidebase/sidebase/.output/server/node_modules/parse5/package.json
    at new NodeError (node:internal/errors:387:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:464:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:748:3)
    at resolveExports (node:internal/modules/cjs/loader:493:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:533:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:942:27)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/zoey/Documents/Development/SideStream/sidebase/sidebase/.output/server/node_modules/parse5-htmlparser2-tree-adapter/lib/index.js:3:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Is this error easier to make sense of? For me it looks similar to the last one (in the sense of it not finsing specific files that should be included in the package.

valiafetisov · 2022-11-16T10:45:08Z

Then (it seems) the problem boils down to nitro not being able to build multiply versions of the packages. As it tries to still combine them together in one? Anyway, it seems like the path to resolve it is to:

Find which of our packages use conflicting dependencies (or subdependencies)
See if it's possible to update/downgrade them to match

Which can be impossible to solve depending on our packages. Also, maybe there are tools/npm commands to investigate or even resolve this kind of situations?

BracketJohn · 2022-11-20T12:41:17Z

Digging into this:

remove most files and directories (server, components, pages, ....)
try out npm run build && npm run start -> it works again
subsequently add back files using git, e.g., git checkout -- components/ and run command from (2)
figure out that the problem re-appears as soon as we add something that imports something from typeorm, e.g., the init plugin
check if conflicting deps of build step occure in typeorm -> npm ls parse5 yields conflicting parse5-results for typeorm + one more for another package
use npm override field to fix dep to higher of the two only for typeorm -> It works 🎊

Here's the override:

  "overrides": {
    "typeorm": {
      "parse5": "6.0.1"
    }
  },

This solution works for npm and pnpm. Yarn users will / may have problems with it 😢 I think for now this is ok until someone complains. I've added a small note to the readme about this.

djschilling · 2022-11-25T14:28:17Z

@BracketJohn the problem still seems to appear. I just followed the getting started guid and npm run build && npm run start still gives me this error:

npm run start

> start
> NODE_ENV=production node .output/server/index.mjs

node:internal/modules/cjs/loader:364
      const err = new Error(
                  ^

Error: Cannot find module '/Users/david/projects/nuxt-sidebase-app/.output/server/node_modules/parse5/lib/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:364:19)
    at Function.Module._findPath (node:internal/modules/cjs/loader:577:18)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:942:27)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/david/projects/nuxt-sidebase-app/.output/server/node_modules/cli-highlight/dist/index.js:30:27)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/david/projects/nuxt-sidebase-app/.output/server/node_modules/parse5/package.json',
  requestPath: 'parse5'
}

npm ls parse5
nuxt-sidebase-app@0.0.1 /Users/david/projects/nuxt-sidebase-app
├─┬ jsdom@20.0.3
│ └── parse5@7.1.1
└─┬ typeorm@0.3.10
  └─┬ cli-highlight@2.1.11
    ├─┬ parse5-htmlparser2-tree-adapter@6.0.1
    │ └── parse5@6.0.1
    └── parse5@5.1.1

djschilling · 2022-11-25T14:34:47Z

adding

    "cli-highlight": {
      "parse5": "6.0.1"
    }

to the overrides section in package.json fixes it for me.

BracketJohn · 2022-11-25T17:17:14Z

Hey @djschilling - you're a saviour, thanks for reporting this -> weird how this slipped through 🤔

I've opened nuxt/bridge#277 to track this + nuxt/framework#79 to resolve this -> can you checkout whether the problem is fixed on nuxt/framework#79 for you?

djschilling · 2022-12-02T16:21:53Z

it ist fixed with this

BracketJohn · 2022-12-03T11:54:41Z

Perfect, thanks for reporting back @djschilling ❤️

zoey-kaiser added 2 commits November 14, 2022 16:50

Removed historie

7b5c084

Updated to Nuxt3 RC 13

586735f

bumped nuxt-parse to 0.3.0

babb0ba

fix: .address is undefined by converting app to nodeListener

b656025

BracketJohn reviewed Nov 15, 2022

View reviewed changes

server/api/example/[id].get.ts Outdated Show resolved Hide resolved

Changed defineEventHandler to eventHandler

693ad97

zoey-kaiser marked this pull request as ready for review November 15, 2022 10:17

zoey-kaiser mentioned this pull request Nov 15, 2022

feat/add pinia store #51

Closed

5 tasks

BracketJohn approved these changes Nov 15, 2022

View reviewed changes

BracketJohn requested changes Nov 15, 2022

View reviewed changes

This comment was marked as outdated.

Sign in to view

Upgraded from RC13 to RC14

6886b36

zoey-kaiser and others added 4 commits November 16, 2022 16:48

Upgraded from RC14 to stable version 3.0.0

64b3772

fix: override sub-parse5 dep of typeorm to make build + start work

2871961

fix: docker build + start by switching to better-sqlite3

aec6368

fix: formatting in package.json;

48e1368

BracketJohn changed the title ~~Removed historie and updated to Nuxt3 RC 13~~ Upgrade to nuxt 3 stable, remove histoire Nov 20, 2022

feat: remove remaining histoire references

88a2561

BracketJohn added 2 commits November 20, 2022 13:34

fix: remove a remaining storybook reference

f624641

docs: add section for yarn usage

09c9fbf

BracketJohn approved these changes Nov 20, 2022

View reviewed changes

BracketJohn merged commit 9c5a997 into main Nov 20, 2022

BracketJohn deleted the remove-historie branch November 20, 2022 12:44

BracketJohn mentioned this pull request Nov 25, 2022

parse5 still throws errors during install through cli-highlight@2.1.11 #78

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to nuxt 3 stable, remove histoire #75

Upgrade to nuxt 3 stable, remove histoire #75

zoey-kaiser commented Nov 14, 2022 •

edited by BracketJohn

BracketJohn commented Nov 14, 2022

zoey-kaiser commented Nov 14, 2022 •

edited

BracketJohn commented Nov 14, 2022

zoey-kaiser commented Nov 14, 2022

BracketJohn commented Nov 15, 2022

BracketJohn left a comment

zoey-kaiser commented Nov 15, 2022

zoey-kaiser commented Nov 15, 2022

This comment was marked as outdated.

valiafetisov commented Nov 15, 2022 •

edited

valiafetisov commented Nov 15, 2022

zoey-kaiser commented Nov 15, 2022

zoey-kaiser commented Nov 16, 2022

valiafetisov commented Nov 16, 2022 •

edited

BracketJohn commented Nov 20, 2022 •

edited

djschilling commented Nov 25, 2022 •

edited

djschilling commented Nov 25, 2022

BracketJohn commented Nov 25, 2022

djschilling commented Dec 2, 2022

BracketJohn commented Dec 3, 2022

Upgrade to nuxt 3 stable, remove histoire #75

Upgrade to nuxt 3 stable, remove histoire #75

Conversation

zoey-kaiser commented Nov 14, 2022 • edited by BracketJohn

BracketJohn commented Nov 14, 2022

zoey-kaiser commented Nov 14, 2022 • edited

BracketJohn commented Nov 14, 2022

zoey-kaiser commented Nov 14, 2022

BracketJohn commented Nov 15, 2022

BracketJohn left a comment

Choose a reason for hiding this comment

zoey-kaiser commented Nov 15, 2022

zoey-kaiser commented Nov 15, 2022

This comment was marked as outdated.

valiafetisov commented Nov 15, 2022 • edited

valiafetisov commented Nov 15, 2022

zoey-kaiser commented Nov 15, 2022

zoey-kaiser commented Nov 16, 2022

valiafetisov commented Nov 16, 2022 • edited

BracketJohn commented Nov 20, 2022 • edited

djschilling commented Nov 25, 2022 • edited

djschilling commented Nov 25, 2022

BracketJohn commented Nov 25, 2022

djschilling commented Dec 2, 2022

BracketJohn commented Dec 3, 2022

zoey-kaiser commented Nov 14, 2022 •

edited by BracketJohn

zoey-kaiser commented Nov 14, 2022 •

edited

valiafetisov commented Nov 15, 2022 •

edited

valiafetisov commented Nov 16, 2022 •

edited

BracketJohn commented Nov 20, 2022 •

edited

djschilling commented Nov 25, 2022 •

edited