lodash/pick cannot be found in production build

Environment

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: yarn@1.22.17
• Bundler: Webpack
• User Config: bridge, buildModules
• Runtime Modules: -
• Build Modules: @nuxt/bridge@3.0.0-27420403.16e2a54

Reproduction

https://codesandbox.io/s/billowing-mountain-r79cng

• Download the minimal reproduction as a zip archive.
• Run: yarn && yarn build && yarn start
• Open http://localhost:3000

Describe the bug

Importing lodash/pick (as suggested at https://github.com/nuxt/framework/issues/2178#issuecomment-1004774184) leads to runtime crash in production build:

Cannot find module '.../.output/server/node_modules/lodash/pick' imported from .../.output/server/chunks/app/server.mjs
Did you mean to import lodash/pick.js?

Additional context

Named imports such as import { pick } from "lodash" are also badly broken. Ideally, I would expect them to work, same as they work in babel/webpack.

I understand that lodash is not managing its modules well, they should be compiled as mjs files. However, lodash is way too popular, it is used broadly by nuxt packages as well, so I believe it deserves some attention. The underlying problem is not specific to lodash, some other packages suffer from it as well, so some generic solution/workaround would be helpful.

Logs

$ node .output/server/index.mjs
Listening on http://localhost:3000/
Cannot find module '/Users/semenov/Downloads/r79cng/.output/server/node_modules/lodash/pick' imported from /Users/semenov/Downloads/r79cng/.output/server/chunks/app/server.mjs
Did you mean to import lodash/pick.js?
  at new NodeError (node:internal/errors:371:5)
  at finalizeResolution (node:internal/modules/esm/resolve:416:11)
  at moduleResolve (node:internal/modules/esm/resolve:932:10)
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

[IlyaSemenov]

I discovered @optimize-lodash/rollup-plugin which does exactly that:

import { defineNuxtConfig } from '@nuxt/bridge'
import { optimizeLodashImports } from "@optimize-lodash/rollup-plugin";

export default defineNuxtConfig({
  bridge: {
    vite: true,
  },
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins.push(optimizeLodashImports())
    },
  },
})

Then in Vue code:

import { pick } from 'lodash'
// transpiles to:
import pick from 'lodash/pick.js';

[danielroe]

This is no longer reproducible in the latest nuxt/nitropack.