Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 18 server components does not work with package from node_modules #36005

Closed
1 task done
samuelhulla opened this issue Apr 8, 2022 · 17 comments
Closed
1 task done

React 18 server components does not work with package from node_modules #36005

samuelhulla opened this issue Apr 8, 2022 · 17 comments

Comments

@samuelhulla
Copy link

samuelhulla commented Apr 8, 2022 •
edited

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 <3
@samuelhulla samuelhulla added the bug Issue was opened via the bug report template. label Apr 8, 2022
@huozhi
Copy link
Member

huozhi commented Apr 8, 2022

@samuelhulla Can you provide a minimal reproduction for it? More about the code of the pages, can't tell the root cause of the rendering issue based on package.json and next.config

@huozhi huozhi added the please add a complete reproduction The issue lacks information for further investigation label Apr 8, 2022
@samuelhulla
Copy link
Author

samuelhulla commented Apr 8, 2022 •
edited

@huozhi Sorry took me some time to figure out what actually had broken the app as i was not sure if it was crashing due to particular package or folder structure from the original repo, but luckily I got it in a very minimal example, so hopefully it will get us one bit closer to the solution.

see https://github.com/samuelhulla/nexitssue

Alternatively you can do just

npx create-next-app@latest --ts

and rename index.tsx to index.server.tsx with the following next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponents: true,
    outputStandalone: true,
    runtime: 'edge',
  },
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  swcMinify: true
}

module.exports = nextConfig

@huozhi
Copy link
Member

huozhi commented Apr 8, 2022

@samuelhulla The error message I got from you reproduction is different: TypeError: Class constructor _class cannot be invoked without 'new, I guess the original issue is not this? This is more like server components related specific issue.

Thought to fix it you need to: move next/head components from index.server.ts to _app.ts.
And CSS Modules can only be used in client components.

If you found anything new with the original error please keep us posted, thanks

@samuelhulla
Copy link
Author

@huozhi yeah regarding modules that's just from the boilerplate, my bad for not noticing the next/head though.

That being said I actually updated my @types/react and @types/react-dom and I'm getting a different error now.

I presume this is outside of the scope of nextjs though. This seems to be directly in caused by framer-motion as adding a motion component inside a .server components produces the following error:

error - ./pages/index.server.tsx:2:0
Module not found: Package path ./?__sc_server__ is not exported from package /Users/samuel/Coding/next12-react18/next12issue/node_modules/framer-motion (see exports field in /Users/samuel/Coding/next12-react18/next12issue/node_modules/framer-motion/package.json)

https://nextjs.org/docs/messages/module-not-found
warn  - You are using the experimental Edge Runtime with `experimental.runtime`.
warn  - You have experimental React Server Components enabled. Continue at your own risk.
error - Error: Cannot find module '/Users/samuel/Coding/next12-react18/next12issue/.next/server/pages/index.js'
Require stack:
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/require.js
- /Users/amuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/load-components.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/build/utils.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/build/output/store.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/build/output/index.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/cli/next-dev.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/bin/next

Nonetheless, if you feel like giving a quick check yourself, I've updated (pushed) the issue on the same repo

https://github.com/samuelhulla/nexitssue

@huozhi
Copy link
Member

huozhi commented Apr 8, 2022

I changed a bit the server components loader to get rid of the __sc_server__ query in #35975, probably you can give another try to next canary to see if it works?

And notice that 3rd party module imports could be problematic at the moment, we're still working on the support of more cases to cover more cases

@huozhi huozhi added area: Server Components and removed please add a complete reproduction The issue lacks information for further investigation labels Apr 8, 2022
@huozhi huozhi changed the title React 18 does not work with Next.js > 12.1.1 React 18 server components does not work with package from node_modules Apr 8, 2022
@huozhi huozhi added kind: bug and removed bug Issue was opened via the bug report template. labels Apr 8, 2022
@samuelhulla
Copy link
Author

samuelhulla commented Apr 8, 2022 •
edited

@huozhi I did fork the latest canary and link it to my project and it does seemingly fix the issue, so good job on that one.

That being said, there are still some issues, with the package using unsupported hooks inside server-side components:

Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Error: This Hook is not supported in Server Components.
    at Object.unsupportedHook (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:924:9)
    at useRef (/Users/samuel/Coding/next12-react18/next12issue/node_modules/react/cjs/react.development.js:1625:21)
    at useConstant (webpack-internal:///./node_modules/framer-motion/dist/es/utils/use-constant.mjs:16:60)
    at useProjectionId (webpack-internal:///./node_modules/framer-motion/dist/es/projection/node/id.mjs:15:80)
    at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:75:130)
    at attemptResolveElement (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1039:18)
    at resolveModelToJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1320:21)
    at Object.toJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:979:14)
    at stringify (<anonymous>)
    at processModelChunk (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:165:14)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Error: This Hook is not supported in Server Components.
    at Object.unsupportedHook (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:924:9)
    at useRef (/Users/samuel/Coding/next12-react18/next12issue/node_modules/react/cjs/react.development.js:1625:21)
    at useConstant (webpack-internal:///./node_modules/framer-motion/dist/es/utils/use-constant.mjs:16:60)
    at useProjectionId (webpack-internal:///./node_modules/framer-motion/dist/es/projection/node/id.mjs:15:80)
    at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:75:130)
    at attemptResolveElement (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1039:18)
    at resolveModelToJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1320:21)
    at Object.toJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:979:14)
    at stringify (<anonymous>)
    at processModelChunk (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:165:14)
Error: This Hook is not supported in Server Components.
    at Object.unsupportedHook (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:924:9)
    at useRef (/Users/samuel/Coding/next12-react18/next12issue/node_modules/react/cjs/react.development.js:1625:21)
    at useConstant (webpack-internal:///./node_modules/framer-motion/dist/es/utils/use-constant.mjs:16:60)
    at useProjectionId (webpack-internal:///./node_modules/framer-motion/dist/es/projection/node/id.mjs:15:80)
    at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:75:130)
    at attemptResolveElement (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1039:18)
    at resolveModelToJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1320:21)
    at Object.toJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:979:14)
    at stringify (<anonymous>)
    at processModelChunk (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:165:14)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 39 ms (564 modules)
error - Error: This Hook is not supported in Server Components.
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Error: This Hook is not supported in Server Components.
    at Object.unsupportedHook (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:924:9)
    at useRef (/Users/samuel/Coding/next12-react18/next12issue/node_modules/react/cjs/react.development.js:1625:21)
    at useConstant (webpack-internal:///./node_modules/framer-motion/dist/es/utils/use-constant.mjs:16:60)
    at useProjectionId (webpack-internal:///./node_modules/framer-motion/dist/es/projection/node/id.mjs:15:80)
    at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:75:130)
    at attemptResolveElement (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1039:18)
    at resolveModelToJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1320:21)
    at Object.toJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:979:14)
    at stringify (<anonymous>)
    at processModelChunk (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:165:14)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Warning: Only ServerContext is supported in Flight
    at ServerComponentWrapper (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:198:35)
    at StyleRegistry (/Users/samuel/Coding/next12-react18/next12issue/node_modules/styled-jsx/dist/index/index.js:671:34)
    at FlushEffectContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:424:37)
    at AppContainer (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:439:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:470:57)
    at div
    at Body (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/render.js:736:21)
Error: This Hook is not supported in Server Components.
    at Object.unsupportedHook (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:924:9)
    at useRef (/Users/samuel/Coding/next12-react18/next12issue/node_modules/react/cjs/react.development.js:1625:21)
    at useConstant (webpack-internal:///./node_modules/framer-motion/dist/es/utils/use-constant.mjs:16:60)
    at useProjectionId (webpack-internal:///./node_modules/framer-motion/dist/es/projection/node/id.mjs:15:80)
    at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:75:130)
    at attemptResolveElement (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1039:18)
    at resolveModelToJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1320:21)
    at Object.toJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:979:14)
    at stringify (<anonymous>)
    at processModelChunk (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:165:14)
Error: This Hook is not supported in Server Components.
    at Object.unsupportedHook (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:924:9)
    at useRef (/Users/samuel/Coding/next12-react18/next12issue/node_modules/react/cjs/react.development.js:1625:21)
    at useConstant (webpack-internal:///./node_modules/framer-motion/dist/es/utils/use-constant.mjs:16:60)
    at useProjectionId (webpack-internal:///./node_modules/framer-motion/dist/es/projection/node/id.mjs:15:80)
    at MotionComponent (webpack-internal:///./node_modules/framer-motion/dist/es/motion/index.mjs:75:130)
    at attemptResolveElement (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1039:18)
    at resolveModelToJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1320:21)
    at Object.toJSON (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:979:14)
    at stringify (<anonymous>)
    at processModelChunk (/Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:165:14)
error - Error: This Hook is not supported in Server Components.

But this I assume is fully out of your control and needs to be updated on framer-motion side.

That being said, I find it a bit weird, even if I deliberately mark a component to be rendered on client side, there is a different error:

i.e. the structure

components/
   MotionComponent.tsx # - contains the { motion } import
   ClientSideWrapper.client.tsx # - explicit client component
pages/
   index.server.tsx - Contains

where

/* MotionComponent.tsx */
import { motion } from 'framer-motion'
const MotionComponent = () => <motion.div animate={{ scale : 1.2 }}>test</div>
export default MotionComponent

/* ClientSideWrapper.client.tsx */
import MotionComponent from './MotionComponent'
const ClientSideWrapper = () => <MotionComponent />
export default ClientSideWrapper

/* index.server.tsx */
import ClientSideWrapper from '../components/ClientSideWrapper'
const Home: NextPage = () => (
  <ClientSideWrapper />
)
export default Home

produces the following error:

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.

whereas I would expect it to work when inside a client side partition of the next app.

Also I find it worth repeating, it's weird, but the motion imports from client side to server-side do work on next: 12.1.1

@huozhi
Copy link
Member

huozhi commented Apr 8, 2022

Would you mind updating the code to the repro you made? I can keep investigating on it 🙏

@samuelhulla
Copy link
Author

samuelhulla commented Apr 9, 2022 •
edited

@huozhi No problem, I pushed to master.

A small note though, the package.json points to the local version of the current forked canary (the build of the next package is unchanged from the vercel/nextjs canary branch).

@CuriosBasant
Copy link
Contributor

CuriosBasant commented Apr 11, 2022 •
edited

@huozhi yeah regarding modules that's just from the boilerplate, my bad for not noticing the next/head though.

That being said I actually updated my @types/react and @types/react-dom and I'm getting a different error now.

I presume this is outside of the scope of nextjs though. This seems to be directly in caused by framer-motion as adding a motion component inside a .server components produces the following error:

error - ./pages/index.server.tsx:2:0
Module not found: Package path ./?__sc_server__ is not exported from package /Users/samuel/Coding/next12-react18/next12issue/node_modules/framer-motion (see exports field in /Users/samuel/Coding/next12-react18/next12issue/node_modules/framer-motion/package.json)

https://nextjs.org/docs/messages/module-not-found
warn  - You are using the experimental Edge Runtime with `experimental.runtime`.
warn  - You have experimental React Server Components enabled. Continue at your own risk.
error - Error: Cannot find module '/Users/samuel/Coding/next12-react18/next12issue/.next/server/pages/index.js'
Require stack:
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/require.js
- /Users/amuel/Coding/next12-react18/next12issue/node_modules/next/dist/server/load-components.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/build/utils.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/build/output/store.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/build/output/index.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/cli/next-dev.js
- /Users/samuel/Coding/next12-react18/next12issue/node_modules/next/dist/bin/next

Nonetheless, if you feel like giving a quick check yourself, I've updated (pushed) the issue on the same repo

https://github.com/samuelhulla/nexitssue

I'm getting this same error. How do you managed to fix this?

@huozhi
Copy link
Member

huozhi commented 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 🤔

@huozhi
Copy link
Member

huozhi commented Apr 11, 2022

@CuriosBasant can you create a new issue with reproduction and verify with canary? I'm not sure what's the root cause based on your error trace and that __sc_server__ thing is changed with latest canary

@samuelhulla
Copy link
Author

@huozhi I can confirm that current canary build fixes the __sc_server__. But yeah, broken ESM certainly isn't desirable. Could you perhaps point me to the right direction a bit where you think issue could stand? I could take a look at it over the weekend when my work schedule clears a little, or at the moment it's a complete shot in the dark?

@samuelhulla
Copy link
Author

samuelhulla commented Apr 12, 2022 •
edited

@CuriosBasant

I'm getting this same error. How do you managed to fix this?

No fix as of yet, only a workaround. For now i'm developing on downgraded next: 12.1.1 until this gets resolved (or you could use the require() old style of js module import.

@huozhi
Copy link
Member

huozhi commented Apr 13, 2022 •
edited

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
Copy link
Author

samuelhulla commented Apr 18, 2022 •
edited

@huozhi Thanks a lot! Could you please link me to the thread, I'm kinda curious as to how will they manage to solve this issue (unless it was handled via DM) and happy holidays. 🎉

@Bielik20 Bielik20 mentioned this issue Aug 16, 2022
Closed
@balazsorban44
Copy link
Member

Hi, since Next.js 13, React Server Components is only supported in the app directory. See https://beta.nextjs.org/docs/getting-started.

If you still have issues, please open a new issue with a reproduction, using next@canary.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 1, 2023

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 1, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@huozhi @samuelhulla @balazsorban44 @CuriosBasant and others