After upgrade experiencing syntax error with importing merge from lodash

[thornomad]

I am working to upgrade the nuxt/sentry module to 8.x from 6.x. I am using nuxt 2.17.3. The upgrade went smoothly until I loaded my browser and I get an error in the console:

Uncaught SyntaxError: The requested module 'http://localhost:4000/node_modules/lodash.mergewith/index.js' doesn't provide an export named: 'default'

This problem stems from .nuxt/sentry.client.shared.js which appears (to me) to be auto-generated during the build. (I'm new to Nuxt so sorry if this is obvious!). In the console, I can inspect that file and see the import statement that is causing the error:

import merge from '/node_modules/lodash.mergewith/index.js'

When I look at node_modules/lodash.mergewith/index.js I see it is using module.exports instead of export default so it seems this would mean we would need to require('lodash.mergewith').

My question is: Why doesn't nuxt know to do that already? How do I tell it to? I've been googling and chat-gpt-ing and not finding any straightforward answer to what I am missing here.

Appreciate anyone who can point me in the right direction to sort this out. I've inherited this project on the front-end and still figuring out this ecosystem. Thanks!

---

configs

My simplified nuxt.config.js file looks like:

export default {
  publicRuntimeConfig: {
    integrations: {
      sentry: {
        isEnabled:
          process.env.NODE_ENV === 'production' &&
          Boolean(process.env.SENTRY_DSN),
        dsn: process.env.SENTRY_DSN,
      },
    },
  },
  modules: [
    '@nuxtjs/sentry',
  ],
  build: {
    hardSource: true,
    parallel: true,
    html: {
      minify: {
        minifyCSS: false,
        minifyJS: false,
      },
    },
    extractCSS: process.env.NODE_ENV === 'production',
    optimizeCSS: process.env.NODE_ENV === 'production',
    extend(config, ctx) {
      config.node = {
        fs: 'empty',
      }
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'source-map'
      }
    },
    transpile: ['vue-instantsearch', 'instantsearch.js/es'],
  },
  sentry: {
    dsn: process.env.SENTRY_DSN,
    attachCommits: false,
    disableServerSide: true,
    publishRelease: false, // requires @sentry/webpack-plugin (struggled to get that piece working)
    config: {
      environment:
        process.env.NODE_ENV === 'production' ? 'production' : 'development',
    },
  },
}

[rchl]

This doesn't look like generated by the latest version of this module. Should have import merge from '~lodash.mergewith' instead. Make sure the dependencies are properly updated.

[thornomad]

Hi @rchl — thanks for your response. All right ... let me look into this a bit further. Based on on yarn.lock file it appears upgraded to me but let me go through this one more time and see if something is off with our package management.

I thought maybe there was something to do with our build process that was throwing it off that I didn't understand. I will report back with my progress.

[rchl]

delete nuxt_modules, delete .nuxt, reinstall dependencies, start nuxt and check again

if nuxt fails to start correctly that it would not re-generate those sentry files so you would be seeing old versions

[thornomad]

I started over with:

rm -rf node_modules .nuxt dist
yarn cache clean
yarn install

However, same problem. I then looked inside of .nuxt/sentry.client.shared.js and I can see that the line you are expecting exists there as you indicated:

import merge from '~lodash.mergewith'

So, it's in the built source; however, when I follow the error from the browser console to view the source of the file in my browser it has been converted (along with other lines actually) to the broken version.

With this knoweldge, I went ahead and disabled the nuxt-vite module inside of buildModules in nuxt.config.js and the problem went away. I then re-enabled it and the problem came back. So, it seems that the problem is related to the nuxt-vite module.

That's helped me to narrow it down. Now just need to figure out what nuxt-vite is doing wrong here.