500 server error when using minified server function in combination with emotion

[sladkoff]

Problem

I tried minification in my open-next.config.ts which seems to be "experimental" according to the documentation:

import type { OpenNextConfig } from 'open-next/types/open-next.d.ts'
const config = {
  default: { // This is the default server, similar to the server-function in open-next v2
    minify: true, // This will minify the output
  },

} satisfies OpenNextConfig

export default config;
export type Config = typeof config

I deployed my app and started testing. At first glance everything seemed to work. Some pages (not all) threw internal server errors.

I inspected the server function lambda logs which included this error for the invocations that seemed to result in the error pages:

2024-09-11T12:41:17.211Z    3dec7f91-6ae3-4b73-8d65-f08442892fd3    ERROR    ⨯ file:///var/task/node_modules/@emotion/react/dist/emotion-react.cjs.mjs:13
  withEmotionCache,
  ^^^^^^^^^^^^^^^^
SyntaxError: Named export 'withEmotionCache' not found. The requested module './emotion-react.cjs.js' 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 './emotion-react.cjs.js';

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:432:15)

Notable dependency versions:

• NextJS: 14.2.3 (pages router)
• MUI: ^5
• emotion: ^11
• open-next: 3.1.2

Workaround

I disabled the minify option and redeployed the app. The pages that were previously broken work with no issues.

[khuezy]

Is this happening with emotion, or with minify: true in general?

[sladkoff]

Is this happening with emotion, or with minify: true in general?

I can not give you much more information as I only have that single project to test with at the moment and it's using emotion.

When minify=true, I get the error. When minify=false I don't get the error.

[khuezy]

Does this work on Vercel? At this point, you should turn minify off - you'll probably benefit more from removing the dev dependencies. Although, I think we already minify here: https://github.com/sst/open-next/blob/main/packages/open-next/src/build/bundleNextServer.ts#L57

[conico974]

bundleNextServer is only used if you set experimentalBundledNextServer in your OpenNext config (which is a deprecated option that we should probably remove in 3.2)

As khuezy said you should first check if you have any dev dependencies bundled (https://open-next.js.org/common_issues#reducing-bundle-size ) and/or you could use function splitting https://open-next.js.org/config/simple_example#splitting-the-server

I'm not sure what we should do with this minify option. It was very useful when we didn't have function splitting and ISR/SSG pages were bundled as well. Nowadays i'm not sure it provides that much benefit ( Ideally we should run some benchmark to properly test this ).

[sladkoff]

Does this work on Vercel? At this point, you should turn minify off - you'll probably benefit more from removing the dev dependencies. Although, I think we already minify here: https://github.com/sst/open-next/blob/main/packages/open-next/src/build/bundleNextServer.ts#L57

Sorry, I don't know if this works on Vercel and can't test this right now. I'll try to play around with the dev-dependencies. Thank you for the advice.