Named export not found on production build

[mvdstam]

Description

Hello,

In one of my projects, I'm getting the following error on production builds:

import { ApolloClient } from "@apollo/client";
         ^^^^^^^^^^^^
SyntaxError: Named export 'ApolloClient' not found. The requested module '@apollo/client' 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 '@apollo/client';
const { ApolloClient } = pkg;

Changing the import to the suggested format doesn't seem to work. However, importing using an explicit path does seem to work:

import { ApolloClient } from "@apollo/client/core/ApolloClient"

However, this is more of a workaround and less of a actual fix. On development, all of this works fine.

A mimimum reproducible repository is available at https:/mvdstam/vite-ssr-test. Simply clone the repository, run npm install && npm run prod and navigate to http://localhost:3000/about.

Either I'm doing something wrong, or this is a bug. Either way, I hope you can point me in the right direction. 😃

Possibly related to #634

[brillout]

Have you seen https://vite-plugin-ssr.com/common-issues#npm-packages-containing-invalid-code?

[mvdstam]

Hi @brillout, thanks so much for your quick reply.

The NPM package @apollo/client app apparently contains "invalid NPM code" (which surprises me a lot since this is package is used quite often as far as I understand). Adding the name of the package to the ssr.noExternal array at least solved the problem in my reproduction repo:

const config: UserConfig = {
  plugins: [react(), ssr()],
  ssr: {
    noExternal: ['@apollo/client']
  }
}

It's also good to hear that the error was on my end instead of a bug. Please consider the issue closed.

Thanks again for your help!

[brillout]

You're welcome! Btw. in case you can convince your employer: https:/sponsors/brillout.

[brillout]

Improved reproduction: https:/brillout/cjs-esm-bug_apollo.