sentry-module icon indicating copy to clipboard operation
sentry-module copied to clipboard

After upgrade experiencing syntax error with importing merge from lodash

Open thornomad opened this issue 9 months ago • 4 comments

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',
    },
  },
}

thornomad avatar May 21 '24 17:05 thornomad