SSR: named imports from lodash

[Jinjiang]

The background is we have some packages which include named imports from lodash, like:

import { merge } from 'lodash';

A minimized reproduction:
https://github.com/Jinjiang/reproductions/tree/vite-ssr-lodash-20240222

This project is based on the official Vue SSR example:
https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-vue

The only thing I added was the package "foo" with a named import from lodash

import { merge } from 'lodash';

// ...

Then if I import "foo" to the project, it will shows:

file:///xxx/reproductions/node_modules/foo/index.js:1
import { merge } from 'lodash';
         ^^^^^
SyntaxError: Named export 'merge' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lodash';
const { merge } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:122:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:188:5)

I tried several ways of config but they all failed

• when I set ssr.noExternal: ['lodash'], the error was the same

• when I set ssr.noExternal: ['foo'], it got another similar error:

  SyntaxError: [vite] Named export 'merge' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from 'lodash';
  const {merge} = pkg;
  

• when I set ssr.noExternal: ['lodash', 'foo'], the browser side seems working:

  

  however, on the server-side, the merge function was undefined:

  

Overall, I didn't find a perfect way to proceed. So ask for help.

Thanks.

[hi-ogawa]

I don't remember the specifics, but I feel like lodash needs to be pre-bundled for this case:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  ssr: {
    optimizeDeps: {
      include: ["lodash"]
    },
    noExternal: [
      'lodash',
      'foo',
    ]
  }
})

With this configuration, I'm seeing the log { merge: [Function (anonymous)] } correctly.

I'm not sure if there's any heuristic implemented to handle ssr.optimizeDeps.include and ssr.noExternal automatically. Maybe this is a related issue?

• [SSR] Vite fails to process CJS npm packages #14158

---

Btw, I think the underlying issue is that lodash's cjs build https://unpkg.com/browse/[email protected]/lodash.js is too difficult to statically analyze for NodeJs to make up named imports.
It looks like Vite has legacyProxySsrExternalModules to do better interop during dev, but this is now "legacy" for the reason that NodeJs cannot do such interop in prod:

• feat!: remove ssr proxy for externalized modules #14521

---

One idea/workaround came to my mind for this specific case is to maybe add resolve.alias (or package manager level alias) from lodash to lodash-es. But I feel this approach has rough edge depending on how much cjs you have in the code base.

[hi-ogawa]

I see, actually that usage seems more natural than the last one. In this case, I think pre-bundling just @zhaojinjiang/temp.vite-ssr-20240226.foo would cover internal lodash, so maybe this could work?

export default defineConfig({
  plugins: [vue()],
  ssr: {
    optimizeDeps: {
      includ: ['@zhaojinjiang/temp.vite-ssr-20240226.foo'],
    },
    noExternal: ['@zhaojinjiang/temp.vite-ssr-20240226.foo'],
  },
});

Technically, if there is a package foo writing import { merge } from "lodash", then such package doesn't run on plain NodeJS, so I think the issue is more on such hypothetical "broken package" side and it seems more natural to swap lodash with lodash-es inside that package.

[Jinjiang]

@hi-ogawa sorry to bother you the third time. I further added React to the package, now I've got a new error which I didn't know how to deal with. (Maybe I didn't fully understand the dependency consumption yet. Met issues again and again 😅)

The reproduction: https://github.com/Jinjiang/reproductions/tree/vite-ssr-lodash-20240229

The source code in the package:

import { useState } from 'react';
import { merge } from 'lodash';

console.log(merge({ a: 1 }, { b: 2 }))

export function MyComponent({ children }) {
  const [counter, setCounter] = useState(0);

  const onClick = () => {
    setCounter(counter + 1);
  }

  return (
    <div>
      <button onClick={onClick}>
        {counter}
      </button>
      <div>{children}</div>
    </div>
  );
}

The vite config file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  ssr: {
    optimizeDeps: {
      include: [
        '@zhaojinjiang/temp.vite-ssr-20240226.bar',
      ]
    },
    noExternal: [
      /@zhaojinjiang/,
      'lodash',
    ]
  }
})

The error log:

$ pnpm dev                 

> reproduce@ dev /Volumes/jinjiang-portable-disk/Developer/teambit/temp/reproductions
> node start.mjs

Server started at http://localhost:5173
{ a: 1, b: 2 }
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useState')
    at useState2 (/Volumes/jinjiang-portable-disk/Developer/teambit/temp/reproductions/node_modules/.vite/deps_ssr/@zhaojinjiang_temp__vite-ssr-20240226__bar.js?v=daea931c:1089:29)
    ...

seems like a double-instances for React, however, I've no idea to make it works.

Thanks.

[hi-ogawa]

I haven't look into the issue, but just a quick comment on the reproduction with external dependencies.
I suppose you're trying to simulate a real scenario by making @zhaojinjiang/... package, but instead of doing that, I think you can use file:... protocol to simulate the same situation. For example, Vite itself uses this to test scenarios like this:

(Note that link:... would be treated differently since resolved symlink lives outside of node_modules, but file:... will create a dedicated copy inside node_modules, so Vite won't treat it differently from other npm dependencies)

vite/playground/optimize-deps/package.json

Lines 21 to 24 in 8b11fea

	"@vitejs/test-dep-css-require": "file:./dep-css-require",
	"@vitejs/test-dep-esbuild-plugin-transform": "file:./dep-esbuild-plugin-transform",
	"@vitejs/test-dep-linked": "link:./dep-linked",
	"@vitejs/test-dep-linked-include": "link:./dep-linked-include",

[hi-ogawa]

I think react is bundled with bar and that's the 2nd copy of react singletons.
I haven't tested with MyComponent, but I made a reproduction to show the idea (also using file:... I wrote above):
https://stackblitz.com/edit/github-vorhme?file=vite.config.mjs

export default defineConfig({
  plugins: [react()],
  ssr: {
    optimizeDeps: {
      include: ['bar'],
      // ++ don't bundle 'react' (you might also need to exclude react-dom, jsx-runtime etc..)
      exclude: ['react'],
    },
    noExternal: ['bar'],
  },
});

I think the other way around is also possible, for example, including react into ssr.noExternal and ssr.optimizeDeps.include. (EDIT: I think this is difficult in practice since you'll also need to add all react 3rd party libs to noExternal as well)

---

As a way to debug this kind of issues, you can check what's in node_modules/.vite/deps_ssr and also DEBUG=vite:deps and DEBUG=vite:resolve-details are convenient.

[Jinjiang]

Thanks so much! It works on my large project totally this time.