Uncaught ReferenceError: defineNuxtPlugin is not defined

[devonik]

I think you have to explicit import defineNuxtPlugin like you import Logrocket in the plugin

import { defineNuxtPlugin } from '#app'

[sangyookm]

Experiencing the same thing.

[mbaev]

Same thing, seems to be an issue.

[mbaev]

For those who curious the error is:

After executing

npm i nuxt-logrocket

and adding config

// nuxt.config.js

export default defineNuxtConfig({
  modules: [
    'nuxt-logrocket',
    //...
  ],
  logRocket: {
    id: 'xxx',
    dev: true,
    config: {}
  },
  //...
});

Nuxt info:

- Operating System: `Darwin`
- Node Version:     `v20.6.1`
- Nuxt Version:     `3.8.0`
- CLI Version:      `3.9.1`
- Nitro Version:    `2.7.2`
- Package Manager:  `npm@10.2.2`
- Builder:          `-`
- User Config:      `ssr`, `devtools`, `typescript`, `app`, `build`, `buildModules`, `modules`, `compilerOptions`, `vite`, `hooks`, `runtimeConfig`, `inlineSSRStyles`
- Runtime Modules:  `nuxt-logrocket@2.0.14`, `@pinia/nuxt@0.5.1`, `@nuxtjs/eslint-module@4.1.0`, `nuxt-monaco-editor@1.2.3`, `@nuxtjs/i18n@8.0.0-rc.5`
- Build Modules:    `@nuxtjs/svg`

[armenr]

I'm having the same issue.

[armenr]

For anyone else that's stuck, this seems to work, for now. I did this quick & dirty, but if you're running Nuxt3, with the latest pinia and the latest logrocket npm packages, you should be ok, I think.

plugins/00.logRocket.client.ts

import LogRocket from 'logrocket'
import type { Plugin as NuxtPlugin } from '#app'

const plugin: NuxtPlugin = defineNuxtPlugin(() => {
  const { $pinia } = useNuxtApp()
  const opts = useRuntimeConfig()?.public?.logRocket

  if (!opts?.id || (!opts?.dev && !(process.env.NODE_ENV === 'production')))
    return

  LogRocket.init(opts?.id, opts?.config)

  if ($pinia && opts?.enablePinia) {
    $pinia.use(({ store }) => {
      store.$subscribe(m => LogRocket.log('mutation', m))
    })
  }

  return { provide: { LogRocket } }
})

export default plugin

And in your nuxt.config.ts, you should have this:

  runtimeConfig: {
    public: {
      // all options can be found here: https://www.npmjs.com/package/logrocket?activeTab=code
      // dist/types.d.ts --> interface IOptions
      logRocket: {
        id: 'som_id/your_logrocket_appName',
        dev: false, // or true if you want
        enablePinia: true,
        config: {},
      },
    },
  },

Hope this helps. It's pretty much the full re-implementation of this repo's plugin...except up-to-date and properly typed.

[kambanwait]

Just adding a comment here just so it's known that it's still an issue. I have set enablePinia to false and still get the error

[richard-edwards]

I'm getting the error as well.

[richard-edwards]

@armenr
Just a note to watch for filenames that contain log and are excluded by a .gitignore rule. Caught me when I pushed to production and the plugin wasn't there at all :)
Thanks for the help. It's working well.

Only thing I added was LogRocket identity tracking.

      // track user in LogRocket
      LogRocket.identify(user.id.toString(), {
        name: user.name,
        email: user.email,
        // Add your own custom user variables here, ie:
        // subscriptionType: 'pro'
      })
      ```
 

[aguirremac]

getting the same issue

[aguirremac]

hi @richard-edwards, can you show me how you implemented it in you nuxt.config file please?

[richard-edwards]

@aguirremac assuming you mean the user identification part .. the plugin part is the same as @armenr shows above.

At the top of my app.vue I added the following. I'm not 100% sure that it's the correct way to do it but it seems to be getting me some of the sessions attached to real users. Still in alpha stage so only have a few people testing it. Important part here is that this has to be run on client only thus the if (process.client) { check.

<script setup lang="ts">
  import LogRocket from 'logrocket'
  const { user } = useUserStore()
  if (process.client) {
    // track user in LogRocket
    if (user) {
      LogRocket.identify(user.id.toString(), {
        name: user.name,
        email: user.email
        // Add your own custom user variables here, ie:
        // subscriptionType: 'pro'
      })
    }
  }
</script>

[aguirremac]

import LogRocket from 'logrocket'
const { user } = useUserStore()
if (process.client) {
// track user in LogRocket
if (user) {
LogRocket.identify(user.id.toString(), {
name: user.name,
email: user.email
// Add your own custom user variables here, ie:
// subscriptionType: 'pro'
})
}
}

thank you.

[thiagonunesbatista]

The same error happens here when adding the LogRocket module in nuxt.config.ts.

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'nuxt-feather-icons',
    'nuxt-gtag',
    'nuxt-icon',
    'nuxt-simple-robots',
    'nuxt-logrocket',
    '@nuxtjs/sitemap'
  ],
  logRocket: {
    id: process.env.LOGROCKET_APP_ID,
    dev: process.env.NODE_ENV !== 'production',
    config: {}
  },
  ......
})

When I Look at the browser console I see an error message:

[armenr]

@thiagonunesbatista - Please see the posts above. We solved this by simply reimplementing the correct code for the plugin, ourselves.

Feel free to use the examples included here. They have been working for the rest of us :)