next.js: React 18 server components does not work with package from node_modules

Verify canary release

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

Provide environment information

    ~/Coding/portfolio    feat/navbar !5  next info  ✔  14:46:22  

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.0
  npm: 8.5.3
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.5-canary.4
  react: 18.0.0-rc.3
  react-dom: 18.0.0-rc.3

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Hey, I’m one of the early react 18 + nextjs 12 adopters. It’s been (amidst some minor troubleshooting hickups which is to be expected) been working really well.

With the official release of react 18 I’ve decided to update my current project to the latest version

    "next": "^12.1.5-canary.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"

This however breaks the next application completely.

I’ve tried all possible combinations of Next and React (including using the react@rc and react-dom@rc as the official docs suggest, albeit now I believe they are just oudated as the rc is behind the official 18.0.0 release).

All the builds fail, unless I downgrade specifically to next: 12.1.1 (previously I had 12.1.1.canary-4 installed). Anything above, including the latest canary just flat out fails with the following error message:

    ~/Coding/portfolio    feat/navbar !2  npm run dev                                             ✔  3s   15:07:04  

> dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

warn  - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
warn  - You are using the experimental Edge Runtime with `experimental.runtime`.
warn  - You have experimental React Server Components enabled. Continue at your own risk.
wait  - compiling...
event - compiled client and server successfully in 1062 ms (129 modules)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 73 ms (130 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 443 ms (443 modules)
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5833:9)
    at renderLazyComponent (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5726:3)
    at renderElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5819:11)
    at renderNodeDestructive (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5875:11)
    at renderNode (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6009:12)
    at renderChildrenArray (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5965:7)
    at renderNodeDestructive (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5897:7)
    at renderNode (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6009:12)
    at renderHostElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5433:3)
    at renderElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5742:5)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5833:9)
    at renderLazyComponent (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5726:3)
    at renderElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5819:11)
    at renderNodeDestructive (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5875:11)
    at renderNode (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6009:12)
    at renderChildrenArray (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5965:7)
    at renderNodeDestructive (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5897:7)
    at renderNode (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6009:12)
    at renderHostElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5433:3)
    at renderElement (/Users/samuel/Coding/portfolio/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5742:5)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I also tried playing with different node and npm versions, but they seem to have no relation as when downgrading to 12.1.1 it works with no matter what node version i have and with anything above it does not work with any of the possible node variations.

Expected Behavior

I’d expect my next application to work with the latest versions of the application.

To Reproduce

Installing next@canary react@latest react-dom@latest should be enough to brick.

I’ll include the rest of my package.json here and next.config for completion sake

{
  "name": "portfolio",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "buildcss": "npx tailwindcss -o build.css --minify",
    "ci": "npm install --immutable --immutable-cache --check-cache"
  },
  "dependencies": {
    "framer-motion": "^6.2.9",
    "next": "^12.1.5-canary.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.8",
    "@types/react": "17.0.38",
    "@typescript-eslint/eslint-plugin": "5.10.2",
    "@typescript-eslint/parser": "5.10.2",
    "autoprefixer": "10.4.2",
    "eslint": "8.8.0",
    "eslint-config-next": "^12.1.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "postcss": "8.4.5",
    "prettier": "2.5.1",
    "prettier-plugin-tailwindcss": "0.1.5",
    "tailwindcss": "3.0.15",
    "typescript": "4.5.5"
  },
  "volta": {
    "node": "17.9.0"
  }
}

// next.config.js
const nextConfig = {
  experimental: {
    serverComponents: true,
    outputStandalone: true,
    runtime: 'edge',
  },
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  swcMinify: true
}

module.exports = nextConfig

Thank you in advance and keep up the great work ❤️