Bug: Module not found: Error: Package path . is not exported from package

[mizmaar3]

Info

Tool	Version
Vue	v3.2.37
vue-router	v4.1.1
vue-gtm	v1.6.0
OS	mac

Input

import { createApp } from "vue";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store.js";
import { createGtm } from "@gtm-support/vue-gtm";

createApp(App)
  .use(router)
  .use(store)
  .use(
    createGtm({
      id:<ID>,
      source: <GTM_SCRIPT_URL>,
      vueRouter: router,
    })
  )
  .mount("#app");

Output or Error

ERROR  Failed to compile with 1 error 
error  in ./node_modules/@gtm-support/vue-gtm/dist/index.js
Module not found: Error: Package path . is not exported from package /Users/.../node_modules/vue-router (see exports field in /Users/.../node_modules/vue-router/package.json)

ERROR in ./node_modules/@gtm-support/vue-gtm/dist/index.js 116:85-106
Module not found: Error: Package path . is not exported from package /Users/.../node_modules/vue-router (see exports field in /Users/.../node_modules/vue-router/package.json)
 @ ./src/main.js 5:0-49 14:8-17

webpack compiled with 1 error

Additional Context

Moved frm vue2 to vue3. tried "@gtm-support/vue-gtm": "^1.6.0", but get this error

[mizmaar3]

Figured out that vue-router 4.1.1 is released yesterday so downgraded vue-router to 4.0.16
Error disappeared and all works fine
https://www.npmjs.com/package/vue-router

[Shinigami92]

Maybe same issue as #225 ?
I think also the issue is related to vue-router 4.1.1
Might need to update the peerDeps and fix it, but might not have the time yet
In the meantime, I hope you can stay on 4.0.16 for now

[Shinigami92]

@mizmaar3 @V35CH can you try out https://www.npmjs.com/package/@gtm-support/vue-gtm/v/2.0.0-beta.1 and report any issues or if it just works?

[simonfunk]

@Shinigami92 just tested, doesn't work.

[V35CH]

@Shinigami92 doesn't work here either.

npm remove vue-router
update package.json: "@gtm-support/vue-gtm": "2.0.0-beta.1",
npm update @gtm-support/vue-gtm

Output:

✘ [ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "vue-router". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "vue-router" package

    node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40945:10:
      40945 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
            ╵           ^

    at packageEntryFailure (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40945:11)
    at resolvePackageEntry (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40941:9)
    at tryNodeResolve (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40748:20)
    at Context.resolveId (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40556:28)
    at Object.resolveId (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39229:55)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:61552:27
    at async node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38746:34
    at async callback (node_modules/esbuild/lib/main.js:921:28)
    at async handleRequest (node_modules/esbuild/lib/main.js:701:30)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38725:18:
      38725 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer, kind }) => {
            ╵                   ~~~~~~~~~

    at setup (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38725:19)
    at handlePlugins (node_modules/esbuild/lib/main.js:843:23)
    at Object.buildOrServe (node_modules/esbuild/lib/main.js:1137:7)
    at node_modules/esbuild/lib/main.js:2085:17
    at new Promise (<anonymous>)
    at Object.build (node_modules/esbuild/lib/main.js:2084:14)
    at Object.build (node_modules/esbuild/lib/main.js:1931:51)
    at runOptimizeDeps (node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39969:34)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/@gtm-support/vue-gtm/dist/index.js:116:93:
      116 │                     return [4 /*yield*/, Promise.resolve().then(function () { return require('vue-router'); })];
          ╵                                                                                              ~~~~~~~~~~~~

3:43:12 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:40945:10: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "vue-router". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "vue-router" package
    at failureErrorWithLog (node_modules/esbuild/lib/main.js:1605:15)
    at node_modules/esbuild/lib/main.js:1251:28
    at runOnEndCallbacks (node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (node_modules/esbuild/lib/main.js:1249:7)
    at node_modules/esbuild/lib/main.js:1358:14
    at node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)

[Shinigami92]

Can someone of you create a simple minimal reproduction GitHub repo?
Then I can jump into that and try to find the error.

I currently have two assumptions:

1. The target in tsconfig.json needs to be updated and I drop support for older ES versions
2. There is a bug in vue-router itself 🤔

[Shinigami92]

Okay, now please try out https://www.npmjs.com/package/@gtm-support/vue-gtm/v/2.0.0-beta.2
I changed the target from ES5 to ES2018 which definitely changed the line that is found in your error
116 │ return [4 /*yield*/, Promise.resolve().then(function () { return require('vue-router'); })];

[simonfunk]

nope, unfortunately not

[Shinigami92]

nope, unfortunately not

is there another error? everything can be helpful
But I start to think the issue is at vue-router, not this plugin itself :/
I just use plain tsc for compile and this should work

[simonfunk]

Here is the full error i get:
ERROR in ./node_modules/@gtm-support/vue-gtm/dist/index.js 66:61-82
Module not found: Error: Package path . is not exported from package /node_modules/vue-router (see exports field in /node_modules/vue-router/package.json)

webpack compiled with 1 error and 1 warning

[Shinigami92]

Yeah, that really sounds like a vue-router error

I assume it has something todo with this section: https://github.com/vuejs/router/blob/2df87efda150027b5e455958f284db8f755caa1a/packages/router/package.json#L9-L29

[simonfunk]

Or maybe the way import vue-router. Seems like firebase had same issue: firebase/firebase-admin-node#1730