Next.js 12.0.2 + Framer 5.0.1 leading to errors in production

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome 95

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Seeing a 500 application error when deploying app to Vercel with the following dependencies:

• next: 12.0.2
• framer: 5.0.1

App deploys fine with next: 12.0.1

Vercel error logs below:

2021-11-01T16:43:25.167Z	76a0eb5e-e736-404e-b454-15468c5f94c2	ERROR	file:///var/task/node_modules/framer-motion/dist/es/context/LazyContext.mjs:1
import { createContext } from 'react';
         ^^^^^^^^^^^^^
SyntaxError: Named export 'createContext' not found. The requested module 'react' 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 'react';
const { createContext } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:142:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
2021-11-01T16:43:25.168Z	76a0eb5e-e736-404e-b454-15468c5f94c2	ERROR	file:///var/task/node_modules/framer-motion/dist/es/context/LazyContext.mjs:1
import { createContext } from 'react';
         ^^^^^^^^^^^^^
SyntaxError: Named export 'createContext' not found. The requested module 'react' 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 'react';
const { createContext } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:142:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24) {
  page: '/'
}
RequestId: 76a0eb5e-e736-404e-b454-15468c5f94c2 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Expected Behavior

Production environment should mimic development, i.e., not crash

To Reproduce

Does not reproduce locally—only seeing on Vercel in production

[shaneosullivan]

Downgrading to 12.0.1 worked for me too. This was a nasty bug to ship, where a site completely fails but only in production. How can this type of error be caught in the future? What tests were missing that allowed it to ship? As someone whose business depends on NextJS & Vercel, I’d love to see a retrospective on this issue to identify the gap in quality control and the mitigation steps being put in place to prevent a re-occurrence.

[sokra]

@KevinShiCA Regarding @shopify/react-form:

It claims to provide a version compatible with Node.js ESM (it has an "exports" field that points to a .mjs file). But only most of the referenced files have the .mjs extension. The referenced file @shopify/react-form/build/esm/_virtual/_rollupPluginBabelHelpers.js doesn’t have the correct extension, so Node.js doesn’t treat it as ESM. That leads to this error:

$ node -e "import('@shopify/react-form')"
(node:30304) UnhandledPromiseRejectionWarning: file:///...@shopify/react-form/build/esm/hooks/field/reducer.mjs:1
import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
         ^^^^^^^^^^^^^
SyntaxError: Named export 'objectSpread2' not found. The requested module '../../_virtual/_rollupPluginBabelHelpers.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 '../../_virtual/_rollupPluginBabelHelpers.js';
const { objectSpread2: _objectSpread2 } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async importModuleDynamicallyWrapper (internal/vm/module.js:451:15)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:30304) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:30304) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This should be fixed in the @shopify/react-form package. Please report it there. cc @michenly

---

import { createContext } from 'react' is fine instead, if it’s really react that is installed here. I have seen reports where react has been replaced with preact and that caused this error. @developit is working on that. If this is not related to preact, please provide a reproduction @sambecker

---

PS: Please try experimental.esmExternals: false as workaround.