question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React 18 server components does not work with package from node_modules

See original GitHub issue

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 ❤️

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:16 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
huozhicommented, Apr 13, 2022

Seems it needs some changes on react side to handle esm import in flight response, react team is aware now and working on it

1reaction
huozhicommented, Apr 11, 2022

@samuelhulla there’s a workaround for your reproduction, you can upgrade to latest canary and change the import to require for "framer-motion"

- import { motion } from 'framer-motion'
+ const { motion } = require('framer-motion')

There’s sth wrong with esm resolving with RSC we still need to investigate 🤔

Read more comments on GitHub >

github_iconTop Results From Across the Web

Upgrading to react@18 and react-dom@18 fails
The reason is that react version in package.json is ^18, but file content for our use in node_modules/@types/react is for React V17.
Read more >
react-hot-loader - npm
You may cold all components from node_modules. This will not work for HOC(like Redux) or dynamically created Components, but might help in most ......
Read more >
module-not-found - Next.js
A module not found error can occur for many different reasons: The module you're trying to import is not installed in your dependencies;...
Read more >
Module not found: Can't resolve 'react/jsx-runtime' | bobbyhadz
If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json ) files, re-run npm install and restart your...
Read more >
Getting started | Primer React
You may run into this conflict even if you're not importing anything from react-native or don't have it installed. This is because some...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found