Nuxt•8mo ago

How to correctly use lodash in a nuxt 3 module?

I've tried to import lodash with a few different ways: 1. import debounce from 'lodash/debounce' 2. import { debounce } from 'lodash Both gave me an error, whenever i tried to use that component from my module:

The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/lodash/lodash.js?v=74319f89' does not provide an export named 'default'

What's the right way to do that? I'm using module starter repo: https://github.com/nuxt/starter/tree/module

GitHub

GitHub - nuxt/starter at module

Create a new Nuxt project, module, layer or start from a theme with our collection of starters. - GitHub - nuxt/starter at module

1 Reply

Alexander KimOP•8mo ago

Here's workaround in module.ts

    nuxt.hook('vite:extendConfig', (config) => {
      config.optimizeDeps = config.optimizeDeps || {}
      config.optimizeDeps.include = config.optimizeDeps.include || []
      config.optimizeDeps.exclude = config.optimizeDeps.exclude || []

      const lodashIndex =
        config.optimizeDeps.exclude.indexOf('lodash')
      if (lodashIndex > -1) {
        config.optimizeDeps.exclude.splice(lodashIndex, 1)
      }

      if (!config.optimizeDeps.include.includes('lodash')) {
        config.optimizeDeps.include.push('lodash')
      }
    })

    nuxt.hook('vite:extendConfig', (config) => {
      config.optimizeDeps = config.optimizeDeps || {}
      config.optimizeDeps.include = config.optimizeDeps.include || []
      config.optimizeDeps.exclude = config.optimizeDeps.exclude || []

      const lodashIndex =
        config.optimizeDeps.exclude.indexOf('lodash')
      if (lodashIndex > -1) {
        config.optimizeDeps.exclude.splice(lodashIndex, 1)
      }

      if (!config.optimizeDeps.include.includes('lodash')) {
        config.optimizeDeps.include.push('lodash')
      }
    })

Gaming

Programming

How to correctly use lodash in a nuxt 3 module?