[pull] develop from baserow:develop

changelog/entries/unreleased/refactor/update_to_nuxt_3.json

@@ -0,0 +1,9 @@
+{
+  "type": "refactor",
+  "message": "Update from Nuxt 2 to Nuxt 3",
+  "issue_origin": "github",
+  "issue_number": 854,
+  "domain": "core",
+  "bullet_points": [],
+  "created_at": "2026-01-14"
+}

premium/web-frontend/modules/baserow_premium/components/views/timeline/TimelineContainer.vue

@@ -203,7 +203,6 @@ import RowEditModal from '@baserow/modules/database/components/row/RowEditModal'
 import { populateRow } from '@baserow/modules/database/store/view/grid'
 import { clone } from '@baserow/modules/core/utils/object'
 import { notifyIf } from '@baserow/modules/core/utils/error'
-import ResizeObserver from 'resize-observer-polyfill'
 import viewDecoration from '@baserow/modules/database/mixins/viewDecoration'
 
 const timescales = {

web-frontend/config/nuxt.config.base.ts

@@ -61,7 +61,7 @@ export default defineNuxtConfig({
       version: pkg.version,
     },
   },
-  modules: [...baserow.modules, '@nuxtjs/i18n'],
+  modules: [...baserow.modules, '@nuxtjs/i18n', '@sentry/nuxt/module'],
   i18n: {
     strategy: 'no_prefix',
     defaultLocale: 'en',

web-frontend/modules/core/components/crudTable/ExpandOnOverflowList.vue

@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import ResizeObserver from 'resize-observer-polyfill'
 import ExpandOnOverflowHiddenContext from '@baserow/modules/core/components/crudTable/ExpandOnOverflowHiddenContext'
 
 /**

web-frontend/modules/core/directives/autoOverflowScroll.js

@@ -1,5 +1,3 @@
-import ResizeObserver from 'resize-observer-polyfill'
-
 /**
  * This directive does the same as `overflow: auto;`, so it will make sure that the
  * scrollbars are visible when the content does not fit inside the element. It

web-frontend/modules/core/module.js

@@ -127,8 +127,6 @@ export default defineNuxtModule({
     addPlugin(resolve('plugins/featureFlags.js'))
     addPlugin(resolve('plugins/papa.js'))
     addPlugin(resolve('plugins/ensureRender.js'))
-    addPlugin(resolve('plugins/sentry.client.js'))
-    addPlugin(resolve('plugins/sentry.server.js'))
     addPlugin(resolve('plugins/version.js'))
     addPlugin(resolve('plugins/posthog.js'))
     addPlugin(resolve('plugins/vueDatepicker.js'))

web-frontend/modules/dashboard/components/widget/WidgetContext.vue

@@ -58,7 +58,9 @@ export default {
         notifyIf(error, 'dashboard')
       }
       this.isDeleteInProgress = false
-      this.hide()
+      if (this.$refs.context) {
+        this.hide()
+      }
     },
   },
 }

web-frontend/modules/database/components/table/Table.vue

@@ -236,7 +236,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import ResizeObserver from 'resize-observer-polyfill'
 
 import { RefreshCancelledError } from '@baserow/modules/core/errors'
 import { notifyIf } from '@baserow/modules/core/utils/error'

web-frontend/modules/database/components/view/gallery/GalleryView.vue

@@ -156,7 +156,6 @@
 <script>
 import debounce from 'lodash/debounce'
 import { mapGetters } from 'vuex'
-import ResizeObserver from 'resize-observer-polyfill'
 
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import { getCardHeight } from '@baserow/modules/database/utils/card'

web-frontend/modules/database/components/view/grid/GridView.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="gridView"
     v-scroll="scroll"
     class="grid-view"
     :class="[
@@ -413,7 +414,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import ResizeObserver from 'resize-observer-polyfill'
 
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import GridViewSection from '@baserow/modules/database/components/view/grid/GridViewSection'
@@ -649,16 +649,12 @@ export default {
   },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onWindowResize)
-    this.resizeObserver.observe(this.$el)
+    this.resizeObserver.observe(this.$refs.gridView)
     window.addEventListener('keydown', this.keyDownEvent)
     window.addEventListener('copy', this.copySelection)
     window.addEventListener('paste', this.pasteFromMultipleCellSelection)
     window.addEventListener('click', this.cancelMultiSelectIfActive)
     window.addEventListener('mouseup', this.multiSelectStop)
-    this.$refs.left.$el.addEventListener(
-      'scroll',
-      this.$el.horizontalScrollEvent
-    )
     this.$store.dispatch(
       this.storePrefix + 'view/grid/fetchAllFieldAggregationData',
       { view: this.view }
@@ -672,6 +668,7 @@ export default {
   beforeUnmount() {
     if (this.resizeObserver !== null) {
       this.resizeObserver.disconnect()
+      this.resizeObserver = null
     }
     window.removeEventListener('keydown', this.keyDownEvent)
     window.removeEventListener('copy', this.copySelection)
@@ -1387,7 +1384,7 @@ export default {
           this.storePrefix + 'view/grid/isMultiSelectActive'
         ] &&
         !event.shiftKey &&
-        (!isElement(this.$el, event.target) ||
+        (!isElement(this.$refs.gridView, event.target) ||
           !['grid-view__row', 'grid-view__rows', 'grid-view'].includes(
             event.target.classList[0]
           ))
@@ -1681,7 +1678,7 @@ export default {
     checkCanFitInTwoColumns() {
       // In some cases this method is called when the component hasn't fully been
       // loaded. This will make sure we don't change the state before that initial load.
-      if (!this.$el) {
+      if (!this.$refs.gridView) {
         return
       }
 
@@ -1693,7 +1690,7 @@ export default {
         (primary ? this.getFieldWidth(primary) : 0) +
         300
 
-      this.canFitInTwoColumns = this.$el.clientWidth > maxWidth
+      this.canFitInTwoColumns = this.$refs.gridView.clientWidth > maxWidth
     },
     /**
      * Event called when the grid view element window resizes.

web-frontend/modules/database/components/view/grid/GridViewSection.vue

@@ -188,7 +188,6 @@
 
 <script>
 import debounce from 'lodash/debounce'
-import ResizeObserver from 'resize-observer-polyfill'
 
 import GridViewHead from '@baserow/modules/database/components/view/grid/GridViewHead'
 import GridViewPlaceholder from '@baserow/modules/database/components/view/grid/GridViewPlaceholder'

web-frontend/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "postinstall": "APP_ENV=dev nuxt prepare",
     "dev": "APP_ENV=dev node --import ./env-remap.mjs ./node_modules/.bin/nuxt dev",
-    "build": "APP_ENV=production nuxt build",
+    "build": "APP_ENV=production NODE_OPTIONS=--max-old-space-size=8192 nuxt build",
     "preview": "node --import ./env-remap.mjs ./node_modules/.bin/nuxt preview",
     "prod": "node --import ./env-remap.mjs .output/server/index.mjs",
     "storybook": "storybook dev -p 6006 --host 0.0.0.0 --no-open",
@@ -105,7 +105,6 @@
     "papaparse": "5.4.1",
     "path-to-regexp": "8.2.0",
     "posthog-js": "^1.232.4",
-    "resize-observer-polyfill": "^1.5.1",
     "sass": "~1.70.0",
     "thenby": "^1.3.4",
     "tippy.js": "^6.3.7",

web-frontend/modules/core/plugins/sentry.client.js → web-frontend/sentry.client.config.ts

@@ -1,27 +1,18 @@
-export default defineNuxtPlugin(async (nuxtApp) => {
-  // Only run on client side
-  if (import.meta.server) {
-    return
-  }
-
-  const config = useRuntimeConfig()
-  const appConfig = useAppConfig()
-  const dsn = config.public.sentryDsn
-
-  if (!dsn || dsn === '') {
-    return
-  }
+import { useRuntimeConfig, useAppConfig, useRouter } from '#imports'
+import * as Sentry from '@sentry/nuxt'
 
-  const Sentry = await import('@sentry/vue')
+const config = useRuntimeConfig()
+const appConfig = useAppConfig()
+const dsn = config.public.sentryDsn
 
+if (dsn && dsn !== '') {
   const defaultConfig = {
-    app: nuxtApp.vueApp,
     dsn,
     release: `baserow-web-frontend@${config.public.version}`,
     environment: config.public.sentryEnvironment || 'production',
     integrations: [
       Sentry.browserTracingIntegration({
-        router: nuxtApp.$router,
+        router: useRouter(),
       }),
       Sentry.replayIntegration({
         maskAllText: true,
@@ -33,8 +24,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     replaysOnErrorSampleRate: 1.0,
   }
 
-  // Merge with user-provided configuration from app config appConfig.sentry.config
-  // can be used to extend or override defaults
+  // Merge with user-provided configuration from app config
+  // appConfig.sentry.config can be used to extend or override defaults
   const userConfig = appConfig.sentry?.config || {}
   let finalIntegrations = defaultConfig.integrations
   if (userConfig.integrations) {
@@ -52,4 +43,4 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   }
 
   Sentry.init(finalConfig)
-})
+}

web-frontend/sentry.server.config.ts

@@ -0,0 +1,14 @@
+import { useRuntimeConfig } from '#imports'
+import * as Sentry from '@sentry/nuxt'
+
+const config = useRuntimeConfig()
+const dsn = config.public.sentryDsn
+
+if (dsn && dsn !== '') {
+  Sentry.init({
+    dsn,
+    release: `baserow-web-frontend@${config.public.version}`,
+    environment: config.public.sentryEnvironment || 'production',
+    tracesSampleRate: 1.0,
+  })
+}

web-frontend/yarn.lock

@@ -3607,6 +3607,13 @@
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
+"@types/tedious@^4.0.14":
+  version "4.0.14"
+  resolved "https://registry.yarnpkg.com/@types/tedious/-/tedious-4.0.14.tgz#868118e7a67808258c05158e9cad89ca58a2aec1"
+  integrity sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/trusted-types@^2.0.7":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -10005,11 +10012,6 @@ reserved-identifiers@^1.0.0:
   resolved "https://registry.yarnpkg.com/reserved-identifiers/-/reserved-identifiers-1.2.0.tgz#d2982cd698e317dd3dced1ee1c52412dbd64fc64"
   integrity sha512-yE7KUfFvaBFzGPs5H3Ops1RevfUEsDc5Iz65rOwWg4lE8HJSYtle77uul3+573457oHvBKuHYDl/xqUkKpEEdw==
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -10834,9 +10836,9 @@ tar-stream@^3.0.0:
     streamx "^2.15.0"
 
 tar@^7.4.0:
-  version "7.5.7"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.7.tgz#adf99774008ba1c89819f15dbd6019c630539405"
-  integrity sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.9.tgz#817ac12a54bc4362c51340875b8985d7dc9724b8"
+  integrity sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==
   dependencies:
     "@isaacs/fs-minipass" "^4.0.0"
     chownr "^3.0.0"