How to handle huge libraries like lodash-es?

[3zzy]

I'm using only a few specific modules from lodash-es — debounce, merge, cloneDeep etc.. in my code like so:

import { debounce, cloneDeep } from "lodash-es";

Then I have to exclude it in optimizeDeps for the dev server to work otherwise I get:

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

  lodash-es (imported by /Users/myusername/Work/my-project-5.7/application/js/build/dashboard/utils/chart.js)
  mitt (imported by /Users/myusername/Work/my-project-5.7/application/js/build/dashboard/event-bus.js)
  axios (imported by /Users/myusername/Work/my-project-5.7/application/js/build/dashboard/utils/pdf-report.js)
  @amcharts/amcharts4/core (imported by /Users/myusername/Work/my-project-5.7/application/js/build/dashboard/utils/chart.js)
  @amcharts/amcharts4/charts (imported by /Users/myusername/Work/my-project-5.7/application/js/build/dashboard/utils/chart.js)

And If I do exclude it, then the dev works but prod build fails:

[vite]: Rollup failed to resolve import "lodash-es" from "../packages/my_project_projects/js/dashboard/reports/overview-report/src/store.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

And ... if I add the same optimizeDep.exclude array to rollupOptions.externals as per the suggestion then the build passes BUT there's an issue with chunks if I set manifest: true (required for backend integration).

So I'm in a pickle here, not sure how to move forward.

Appreciate any help! Thanks.

[yyx990803]

It looks like you didn't install lodash-es in the right location rather than a dep optimization issue.

[3zzy]

Not sure I follow cause "lodash-es": "^4.17.15", is present under dependencies.

The working dir is huge but here's a simplified project tree:

Edited to add: Its a Vue 3 SPA currently working fine with Webpack 5.

[LinusBorg]

Is this a monorepo? (Because the vite app seems to live in a packages folder)

[3zzy]

Is this a monorepo? (Because the vite app seems to live in a packages folder)

Yes, it is.

[3zzy]

And here's my vite config in case it helps find the issue:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// import liveReload from 'vite-plugin-live-reload'

const rootDir = path.resolve(__dirname, "../");
const packagesDir = path.resolve(rootDir, "packages");
const applicationDir = path.resolve(rootDir, "application");

export default defineConfig({
  resolve: {
    alias: [
      { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' },
      { find: "@dashboard", replacement: path.resolve(applicationDir, "js/build/dashboard") }
    ]
  },
  plugins: [
    vue(),
    // liveReload(__dirname+'/(app|config|views)/**/*.php')
  ],
  root: '../',
  base: process.env.APP_ENV === 'development' ? '/' : '/dist/',
  build: {
    // output dir for production build
    outDir: path.resolve(__dirname, '../application/js/dist'),
    emptyOutDir: true,

    // emit manifest so PHP can find the hashed files
    manifest: false,

    // esbuild target
    target: 'es2017',

    // entries
    rollupOptions: {
      input: {
        'overview-report': path.resolve(packagesDir, 'my_projects/js/dashboard/reports/overview-report/src/app.js'),
      },
      external: ['lodash-es', '@amcharts/amcharts4/core', '@amcharts/amcharts4/charts', 'axios', 'mitt']
    }
  },
  optimizeDeps: {
    exclude: ['lodash-es', '@amcharts/amcharts4/core', '@amcharts/amcharts4/charts', 'axios', 'mitt'],
  },
  server: {
    // required to load scripts from custom host
    cors: true,
    strictPort: true,
    port: 3000
  },

})

[LinusBorg]

lodash-es should probably be a dependency of the /packages/my_porjects package ...