Error after upgrading to Vue 3: "default" is not exported by @vue/[email protected]

[chlumpchatkupt]

Background

We are trying to migrate a Dockerized Vue 2 app to Vue 3 and have upgraded (among other packages):

• @vitejs/plugin-vue2 2.3.3 --> @vitejs/plugin-vue 6.0.1
• buefy 0.9.29 --> buefy 3.0.2
• bulma 0.9.4 --> bulma 1.0.4
• vite 7.1.3 --> vite 7.1.5
• vue 2.7.14 --> vue 3.5.21
• vue-router 3.5.3 --> vue-router 4.5.1
• vuex 3.6.2 --> vuex 4.1.0

To work through the migration, we have made the required changes to:

• App.vue
• main.ts
• router/index.ts
• store/index.ts
• vite.config.js

Problem

After upgrading the packages and making the required changes, we encounter the error

"default" is not exported by "node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.esm-bundler.js"

and the app cannot be built.

[+] Building 13.0s (13/14)
=> [internal] load local bake definitions                                                   0.0s
=> => reading from stdin 609B                                                               0.0s
=> [internal] load build definition from Dockerfile                                         0.0s
=> => transferring dockerfile: 764B                                                         0.0s
=> [internal] load metadata for docker.io/library/node:24.7-alpine                          0.4s
=> [internal] load .dockerignore                                                            0.0s
=> => transferring context: 358B                                                            0.0s
=> [base 1/4] FROM docker.io/library/node:24.7-alpine@sha256:be4d5e92ac68483ec71440bf59348  0.0s
=> [internal] load build context                                                            0.0s
=> => transferring context: 25.64kB                                                         0.0s
=> CACHED [base 2/4] WORKDIR /app                                                           0.0s
=> CACHED [base 3/4] COPY package*.json pnpm-lock.yaml /app                                 0.0s
=> CACHED [base 4/4] RUN apk add --no-cache git     && corepack enable     && pnpm config   0.0s
=> CACHED [prod-deps 1/1] RUN pnpm fetch --prod     && pnpm install --prefer-offline --ign  0.0s
=> CACHED [deploy 1/2] COPY --from=prod-deps /app/node_modules /app/node_modules            0.0s
=> [build 1/2] COPY . /app                                                                  0.1s
=> ERROR [build 2/2] RUN pnpm fetch     && pnpm install --prefer-offline --ignore-scripts  12.3s
------
> [build 2/2] RUN pnpm fetch     && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile     && pnpm build:
0.250 Importing packages to virtual store
0.258 Already up to date
0.268 Progress: resolved 1, reused 0, downloaded 0, added 0
1.268 Progress: resolved 360, reused 0, downloaded 64, added 64
2.268 Progress: resolved 360, reused 0, downloaded 102, added 102
3.270 Progress: resolved 360, reused 0, downloaded 188, added 188
4.271 Progress: resolved 360, reused 0, downloaded 234, added 233
5.271 Progress: resolved 360, reused 0, downloaded 334, added 333
6.272 Progress: resolved 360, reused 0, downloaded 357, added 357
7.273 Progress: resolved 360, reused 0, downloaded 359, added 359
7.624 Progress: resolved 360, reused 0, downloaded 360, added 360, done
7.972
7.972 ╭ Warning ─────────────────────────────────────────────────────────────────────╮
7.972 │                                                                              │
7.972 │   Ignored build scripts: @parcel/watcher, core-js, esbuild.                  │
7.972 │   Run "pnpm approve-builds" to pick which dependencies should be allowed     │
7.972 │   to run scripts.                                                            │
7.972 │                                                                              │
7.972 ╰──────────────────────────────────────────────────────────────────────────────╯
7.972
8.138 Lockfile is up to date, resolution step is skipped
8.163 Already up to date
8.309
8.309 dependencies:
8.309 + @turf/bbox 7.2.0
8.309 + @types/chroma-js 3.1.1
8.309 + @types/d3 6.7.0
8.309 + @types/d3-tip 3.5.8
8.309 + @types/dc 4.2.5
8.309 + @types/leaflet 1.9.20
8.309 + @types/lodash 4.17.20
8.309 + @types/node 24.3.1
8.309 + @types/uuid 10.0.0
8.309 + @vitejs/plugin-vue 6.0.1
8.309 + @vitejs/plugin-vue2 2.3.3
8.309 + async-mutex 0.5.0
8.309 + axios 1.11.0
8.309 + axios-auth-refresh 3.3.6
8.309 + buefy 3.0.2
8.309 + bulma 1.0.4
8.309 + chroma-js 3.1.2
8.309 + crossfilter2 1.5.4
8.309 + d3 6.7.0
8.309 + d3-regression 1.3.10
8.309 + d3-scale 4.0.2
8.309 + d3-v6-tip 1.0.9
8.309 + dayjs 1.11.18
8.309 + dc 4.2.7
8.309 + html-to-image 1.11.13
8.309 + leaflet 1.9.4
8.309 + lodash 4.17.21
8.309 + maplibre-gl 5.7.1
8.309 + pmtiles 4.3.0
8.309 + qs 6.14.0
8.309 + rxjs 7.8.2
8.309 + uuid 13.0.0
8.309 + vite 7.1.5
8.309 + vue 3.5.21
8.309 + vue-router 4.5.1
8.309 + vue-slider-component 3.2.24
8.309 + vuex 4.1.0
8.309 + vuex-composition-helpers 1.2.0
8.309
8.309 devDependencies:
8.309 + @typescript-eslint/eslint-plugin 8.43.0
8.309 + @typescript-eslint/parser 8.43.0
8.309 + @vue/eslint-config-typescript 14.6.0
8.309 + eslint 9.35.0
8.309 + eslint-plugin-vue 10.4.0
8.309 + sass 1.92.1
8.309 + typescript 5.9.2
8.309
8.311 Done in 294ms using pnpm v10.15.1
8.435
8.435 > [email protected] build /app
8.435 > vite build
8.435
8.572 vite v7.1.5 building for production...
8.624 transforming...
11.85 DEPRECATION WARNING [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
11.85 Use string.unquote instead.
11.85
11.85 More info and automated migrator: https://sass-lang.com/d/import
11.85
11.85    ╷
11.85 34 │   @return unquote("rgba(var(#{$varName}), #{$alpha})");
11.85    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11.85    ╵
11.85     node_modules/.pnpm/[email protected]/node_modules/bulma/sass/utilities/css-variables.scss 34:11                                    getRgbaVar()
11.85     node_modules/.pnpm/[email protected][email protected][email protected]_/node_modules/buefy/src/scss/components/_colorpicker.scss 187:34  @forward
11.85     node_modules/.pnpm/[email protected][email protected][email protected]_/node_modules/buefy/src/scss/buefy.scss 8:1                       @use
11.85     src/assets/scss/main.scss 81:1                                                                                               root stylesheet
11.85
12.16 ✓ 1454 modules transformed.
12.16 ✗ Build failed in 3.58s
12.16 error during build:
12.16 /app/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.esm-bundler.js?commonjs-proxy (1:9): "default" is not exported by "node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.esm-bundler.js", imported by "/app/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.esm-bundler.js?commonjs-proxy".
12.16 file: /app/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.esm-bundler.js?commonjs-proxy:1:9
12.16
12.16 1: export { default } from "/app/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compile...
12.16             ^
12.16
12.16     at getRollupError (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
12.16     at error (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
12.16     at Module.error (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16920:16)
12.16     at Module.getVariableForExportName (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17084:29)
12.16     at getVariableForExportNameRecursive (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16739:19)
12.16     at Module.traceVariable (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17370:44)
12.16     at ModuleScope.findVariable (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:15042:39)
12.16     at FunctionScope.findVariable (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5629:38)
12.16     at FunctionBodyScope.findVariable (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5629:38)
12.16     at ChildScope.findVariable (file:///app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5629:38)
12.19  ELIFECYCLE  Command failed with exit code 1.
------
Dockerfile:16

--------------------

  15 |     COPY . /app

  16 | >>> RUN pnpm fetch \

  17 | >>>     && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile \

  18 | >>>     && pnpm build

  19 |

--------------------

failed to solve: process "/bin/sh -c pnpm fetch     && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile     && pnpm build" did not complete successfully: exit code: 1

Question

How can this problem be resolved so that the app can be built?

Is there anything that we should explore?

Any ideas would be greatly appreciated.

Thanks!

Further information (edited)

After updating vite.config.js to have:

commonjsOptions: {
  include: [],
},

the build continues, but then fails later with:

13.77 src/service/useConstants.ts (7:7): "default" is not exported by "node_modules/.pnpm/[email protected]/node_modules/lodash/lodash.js", imported by "src/service/useConstants.ts".
13.77 file: /app/src/service/useConstants.ts:7:7
13.77
13.77 5: import basemap from '@/assets/json/basemap.json';
13.77 6: // @ts-ignore
13.77 7: import _ from 'lodash';
13.77           ^

By changing a number of imports throughout the app from, e.g.:

import _ from 'lodash';
import dayjs from 'dayjs';
import createAuthRefreshInterceptor from 'axios-auth-refresh';

to

import * as _ from 'lodash';
import * as dayjs from 'dayjs';
import * as createAuthRefreshInterceptor from 'axios-auth-refresh';

the build completes, but the app fails to load due to an error due to dayjs.min.js:1:7054:

TypeError: t2 is not a function. (In 't2(e2, _, O)', 't2' is an instance of Object)

Note that tsconfig.json includes:

"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",

[chlumpchatkupt]

Figured out the issue. The problem is that one dependency (vue-slider-component 3.2.24) is incompatible with Vue 3.

Commenting out the code related to it allows the build to complete without the need to change the imports or update vite.config.js with:

commonjsOptions: {
  include: [],
},