Pages using getStaticProps is broken in next.js 14

[peakercope]

Link to the code that reproduces this issue

https://github.com/peakercope/material-ui-nextjs-pages-router-ts-example

To Reproduce

1. Clone repo
2. Install dependencies yarn install
3. Build project yarn build
4. Run app node .next/standalone/server.js
5. Open http://localhost:3000 in any browser

Current vs. Expected behavior

Current behavior:
500 Internal Server Error in browser

Console log:

 ⨯ file:///material-ui-nextjs-pages-router-ts-example/.next/standalone/node_modules/swr/_internal/dist/index.mjs:1
import React, { useEffect, useLayoutEffect, createContext, useContext, useMemo, useRef, createElement } 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 { useEffect, useLayoutEffect, createContext, useContext, useMemo, useRef, createElement } = pkg;

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

Expected behavior:
App opens without error

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 4.0.0
  pnpm: 7.25.0
Relevant Packages:
  next: 14.0.0
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

Pages http://localhost:3000 and http://localhost:3000/about responses with error.
While page http://localhost:3000/without-static-props which doesn't have getStaticProps function opens successfully.

_NEXT-1700

[madebyfabian]

Also seeing this with swiper:

[semoal]

Same here with react-stately

 ⨯ file:///.../.next/standalone/node_modules/.pnpm/@[email protected][email protected]/node_modules/@react-stately/utils/dist/import.mjs:1
import {useState as $6imuh$useState, useRef as $6imuh$useRef, useCallback as $6imuh$useCallback} from "react";
                                                              ^^^^^^^^^^^
SyntaxError: Named export 'useCallback' 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 {useState: $6imuh$useState, useRef: $6imuh$useRef, useCallback: $6imuh$useCallback} = pkg;

[ValentinH]

Same with framer-motion:

 ⨯ 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 (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
    ```

On my side, the app runs fine locally (`next build && next start`)  but crashes once deployed on Vercel 🙈 

[willholmeswastaken]

Same for zustand. Runs fine locally with next commands, but when ran inside of docker or a remote server it produces this error.

⨯ file:///home/node_modules/zustand/esm/index.mjs:314:41:24 
import { useDebugValue } from 'react';
   ^^^^^^^^^^^^^
 SyntaxError: Named export 'useDebugValue' 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 { useDebugValue } = pkg;

 at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
 at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
 at async Promise.all (index 0)
 at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
 at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)

[roderickhsiao]

seeing the same for get server props (under page folder) for react-query. Thought the server component logic only trigger when we are in app folder?

Interesting enough that the issue is not happening when running dev, but build will crash

[CesarBenavides777]

My issue comes from using an empty array in getStaticPaths, used to work pre Next 14 but now I get 500 errors when building. Works fine on Dev also

export async function getStaticPaths() {
  const paths = await fetch(
    `pathToJSON`,
    {
      method: "GET",
    },
  ).then((res) => res.json());

  let formattedPaths =
    paths.length > 0
      ? paths.map((path) => {
          return {
            params: {
              slug: path.url.replace("/stuff/", ""),
            },
          };
        })
      : [];

  return {
    paths: isStage ? [] : formattedPaths,
    fallback: "blocking",
  };
}

This worked perfectly fine before Next 14.

[doorman02]

Getting this error as well for swr but only on Vercel works fine locally, after upgrading to 14.0.0

 ⨯ file:///var/task/node_modules/swr/_internal/dist/index.mjs:1
import React, { useEffect, useLayoutEffect, createContext, useContext, useMemo, useRef, createElement } 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:

[leerob]

Thanks for reporting this and including a reproduction, we'll take a look here 🙏

[7alip]

I'm not sure if it's related but upgrading to 14 doesn't seem to work on Vercel but fine locally.

⨯ node:internal/modules/esm/module_job:124
        this.module.instantiate();
                    ^
Error: request for './render/dom/motion.mjs' is not in cache
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  code: 'ERR_VM_MODULE_LINK_FAILURE'
}

Another

 ⨯ file:///var/task/node_modules/@chakra-ui/css-reset/dist/chunk-B4LBJQ3X.mjs:5
import { jsx } from "react/jsx-runtime";
         ^^^
SyntaxError: Named export 'jsx' not found. The requested module 'react/jsx-runtime' 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/jsx-runtime';
const { jsx } = pkg;

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

My _app.tsx looks like:

<QueryClientProvider>
  <Hydrate>
    <AuthProvider>
      <ChakraProvider>
        <DefaultSeo />
        <Component {...pageProps} />
      </ChakraProvider>
    </AuthProvider>
  </Hydrate>
  <ReactQueryDevtools />
</QueryClientProvider>

[rickyrauch]

+1 @7alip, it works locally

[ValentinH]

BTW having such issues only happening on Vercel is pretty annoying. When we do such updates, we run the app in production mode to ensure that everything is fine but it's obviously not enough. Fortunately, we have a staging environment that prevented us from deploying this to production.

It would be great to catch this kind of issues locally as well. Maybe a way to emulate the Vercel env.

[ivxmanagement]

Happening to me too, only on Vercel. In this case it's trpc/react-query

 ⨯ file:///var/task/frontend/node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs:5
import React, { createContext, useRef, useState, useEffect, useCallback, useMemo } 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, useRef, useState, useEffect, useCallback, useMemo } = pkg;

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

[timneutkens]

Been tracking this back to which version / PR and a minimal reproduction.

Minimal reproduction

import useSWR from 'swr'

console.log(useSWR)

export default function Home() {
  return <h1>Hello</h1>
}

export async function getStaticProps() {
  return {
    props: {
      foo: "bar",
    },
  };
}

Version

Manually went back canary versions to find which version introduced it with this reproduction: https://github.com/vercel/next.js/releases/tag/v13.5.6-canary.2

Which would indicate this is the PR that broke this case: #56924

We'll investigate further, Jimmy will be online in a few hours 👍

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.