N
Nuxt•10mo ago
Alexander Kim

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 Kim
Alexander KimOP•10mo 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')
      }
    })

Did you find this page helpful?