React 18 server components does not work with package from node_modules
See original GitHub issueVerify 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 ❤️
Issue Analytics
- State:
- Created a year ago
- Comments:16 (9 by maintainers)
Top GitHub Comments
Seems it needs some changes on react side to handle esm import in flight response, react team is aware now and working on it
@samuelhulla there’s a workaround for your reproduction, you can upgrade to latest canary and change the
import
torequire
for"framer-motion"
There’s sth wrong with esm resolving with RSC we still need to investigate 🤔