search

awesome-reveal / react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.
https://react-awesome-reveal.morello.dev
MIT License
1.15k stars 43 forks source link

Does not work on nextjs 14 #201

Open Johannes5 opened 9 months ago

Johannes5 commented 9 months ago

Describe the bug Does not work on nextjs 14 I think because emotion does not work with nextjs 13 and 14 emotion issue

I found out, because the reveals weren't triggered on my landing page after upgrading to 14.

To Reproduce use it in a fresh nextjs14 project

that's what I did. and I got:

null
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
null
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "931706966"
null
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
null
createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:35:92)
    at (rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:60:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js:9:95)
    at (rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:80:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-awesome-reveal/dist/index.js:16:84)
    at (rsc)/./node_modules/react-awesome-reveal/dist/index.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/react-awesome-reveal.js:40:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async eq (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402260)
    at async tr (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405987)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406537)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406668)
    at async tu (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
    at async /Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2564 {
  digest: '2636667005'
}
 ⨯ node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41) @ React
 ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:35:92)
    at (rsc)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:60:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js:9:95)
    at (rsc)/./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/@emotion.js:80:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-awesome-reveal/dist/index.js:16:84)
    at (rsc)/./node_modules/react-awesome-reveal/dist/index.js (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/vendor-chunks/react-awesome-reveal.js:40:1)
    at __webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:8:78)
    at (rsc)/./src/app/page.tsx (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/johannes/pCloud/Programming/reveal-test/reveal/.next/server/webpack-runtime.js:33:42)
    at async eq (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402260)
    at async tr (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405987)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406537)
    at async tn (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406668)
    at async tu (/Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
    at async /Users/johannes/pCloud/Programming/reveal-test/reveal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2564 {
  digest: '2636667005',
  page: '/'

Potential solution Use Emotion v10 instead of v11. Another workaround is to use the @emotion/react and @emotion/styled packages instead of @emotion/core. You can find more information about these workarounds in the comments of the GitHub issue.

Johannes5 commented 9 months ago

and when "use client" added, it doesn't throw out the above errors, but the reveal does not work

Dave-Forti commented 2 months ago

and when "use client" added, it doesn't throw out the above errors, but the reveal does not work

I'm currently facing the same issue on next js, nothing renders

iamyegor commented 1 month ago

Is there an alternative to react awesome reveal that works for NEXT.js 14 server components?

bestLessons commented 3 weeks ago

you can reexport it but still would be nice if it's fixed on the library side

'use client'
import { Fade as ReactFade } from 'react-awesome-reveal'

export const Fade = ReactFade